實例

一段可編輯的段落：

 p contenteditable= true 這是一個可編輯的段落。 /p 

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

所有主流瀏覽器都支持 contenteditable 屬性。

定義和用法

contenteditable 屬性規定元素內容是否可編輯。

注釋：如果元素未設置 contenteditable 屬性，那么元素會從其父元素繼承該屬性。

HTML 4.01 與 HTML5 之間的差異

contenteditable 屬性是 HTML5 中的新屬性。

語法

 element contenteditable= true|false 

屬性值

在HTML里面，光標是一個對象，光標對象是只有當你選中某個元素的時候才會出現的。

當我們去點擊一個輸入框的時候，實際上它會產生一個選中對象-selection（就是我們可以看到的文字變成藍色的那個區域），selection在火狐瀏覽器可以直接用 window.getSelection()獲取，在HTML里面，selection只有一個的，并且selection是一個區域，你可以想象成一個長方形，它是有開始和結束的

當你點擊一個輸入框，或者你切換到別的輸入框，selection是會跟著變化的。光標就是在selection里面，光標叫做range，是一個片段區域，和selection一樣，有開始點，和結束點，當我們對文字按下左鍵向右拉的時候，就看到了文字變成藍色，那個就是光標的開始和結束，當我們直接點一下的時候，光標在閃，其實只是開始和結束點重疊了。

OK，現在我們來實際操作光標了。直接看完整的代碼，然后看效果吧。

 !DOCTYPE html html lang= en head  meta charset= UTF-8  title /title  style #edit{height:500px;width:500px;border:1px solid red;} /style /head body  div id= edit contenteditable /div  input type= text id= emojiInput  button id= sendEmoji 發送表情 /button  script  var sendEmoji = document.getElementById( sendEmoji ) // 定義最后光標對象 var lastEditRange; // 編輯框點擊事件 document.getElementById( edit ).onclick = function() { // 獲取選定對象 var selection = getSelection() // 設置最后光標對象 lastEditRange = selection.getRangeAt(0) } // 編輯框按鍵彈起事件 document.getElementById( edit ).onkeyup = function() { // 獲取選定對象 var selection = getSelection() // 設置最后光標對象 lastEditRange = selection.getRangeAt(0) } // 表情點擊事件 document.getElementById( sendEmoji ).onclick = function() { // 獲取編輯框對象 var edit = document.getElementById( edit ) // 獲取輸入框對象 var emojiInput = document.getElementById( emojiInput ) // 編輯框設置焦點 edit.focus() // 獲取選定對象 var selection = getSelection() // 判斷是否有最后光標對象存在 if (lastEditRange) { // 存在最后光標對象，選定對象清除所有光標并添加最后光標還原之前的狀態 selection.removeAllRanges() selection.addRange(lastEditRange) } // 判斷選定對象范圍是編輯框還是文本節點 if (selection.anchorNode.nodeName != #text ) { // 如果是編輯框范圍。則創建表情文本節點進行插入 var emojiText = document.createTextNode(emojiInput.value)  if (edit.childNodes.length 0) { // 如果文本框的子元素大于0，則表示有其他元素，則按照位置插入表情節點 for (var i = 0; i edit.childNodes.length; i++) { if (i == selection.anchorOffset) { edit.insertBefore(emojiText, edit.childNodes[i]) } else { // 否則直接插入一個表情元素 edit.appendChild(emojiText) } // 創建新的光標對象 var range = document.createRange() // 光標對象的范圍界定為新建的表情節點 range.selectNodeContents(emojiText) // 光標位置定位在表情節點的最大長度 range.setStart(emojiText, emojiText.length) // 使光標開始和光標結束重疊 range.collapse(true) // 清除選定對象的所有光標對象 selection.removeAllRanges() // 插入新的光標對象 selection.addRange(range) } else { // 如果是文本節點則先獲取光標對象 var range = selection.getRangeAt(0) // 獲取光標對象的范圍界定對象，一般就是textNode對象 var textNode = range.startContainer; // 獲取光標位置 var rangeStartOffset = range.startOffset; // 文本節點在光標位置處插入新的表情內容 textNode.insertData(rangeStartOffset, emojiInput.value) // 光標移動到到原來的位置加上新內容的長度 range.setStart(textNode, rangeStartOffset + emojiInput.value.length) // 光標開始和光標結束重疊 range.collapse(true) // 清除選定對象的所有光標對象 selection.removeAllRanges() // 插入新的光標對象 selection.addRange(range) } // 無論如何都要記錄最后光標對象 lastEditRange = selection.getRangeAt(0) } /script /body /html 

以上就是html規定元素內容是否可編輯的屬性contenteditable的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。