contenteditable
屬性用于在 HTML 中將元素設置為可編輯的。通過將該屬性設置為 "true"
,用戶可以直接在頁面上編
輯元素的內容。
要使用 contenteditable
屬性,您只需要在要編輯的元素上添加該屬性即可。以下是一個示例:
html
<div contenteditable="true">
這是一個可編輯的文本。
</div>
在上面的示例中,我們將 <div>
元素設置為可編輯。用戶可以單擊該元素并直接修改其中的文本內容。
您還可以使用 JavaScript 來獲取或修改可編輯元素的內容。例如,可以使用 innerHTML
屬性來獲取或設置元素的 HTML
內容,或者使用 textContent
屬性來獲取或設置元素的純文本內容。下面是一個示例:
html
<div id="editable" contenteditable="true">
這是一個可編輯的文本。
</div>
<script>
var editableDiv = document.getElementById("editable");
var content = editableDiv.innerHTML; // 獲取可編輯元素的 HTML 內容
editableDiv.innerHTML = "<p>新的內容</p>"; // 設置可編輯元素的 HTML 內容
</script>
請注意,在使用 contenteditable
屬性時,應該對用戶輸入的內容進行適當的驗證和處理,以確保安全性和數據一致性。