明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html規(guī)定元素內(nèi)容是否可編輯的屬性contenteditable

發(fā)表時(shí)間：2024-05-12 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]實(shí)例一段可編輯的段落：<p contenteditable="true">這是一個(gè)可編輯的段落。</p>瀏覽器支持IEFirefoxChromeSafariOpera所有主流瀏覽器都支持 contenteditable 屬性。定義和用法contented...

實(shí)例

一段可編輯的段落：

<p contenteditable="true">這是一個(gè)可編輯的段落。</p>

瀏覽器支持


IE

Firefox

Chrome

Safari

Opera


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

定義和用法

contenteditable 屬性規(guī)定元素內(nèi)容是否可編輯。

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

HTML 4.01 與 HTML5 之間的差異

contenteditable 屬性是 HTML5 中的新屬性。

語法

<element contenteditable="true false">

屬性值

值描述
true規(guī)定元素可編輯。
false規(guī)定元素不可編輯。

在HTML里面，光標(biāo)是一個(gè)對象，光標(biāo)對象是只有當(dāng)你選中某個(gè)元素的時(shí)候才會(huì)出現(xiàn)的。

當(dāng)我們?nèi)c(diǎn)擊一個(gè)輸入框的時(shí)候，實(shí)際上它會(huì)產(chǎn)生一個(gè)選中對象-selection（就是我們可以看到的文字變成藍(lán)色的那個(gè)區(qū)域），selection在火狐瀏覽器可以直接用 window.getSelection()獲取，在HTML里面，selection只有一個(gè)的，并且selection是一個(gè)區(qū)域，你可以想象成一個(gè)長方形，它是有開始和結(jié)束的

當(dāng)你點(diǎn)擊一個(gè)輸入框，或者你切換到別的輸入框，selection是會(huì)跟著變化的。光標(biāo)就是在selection里面，光標(biāo)叫做range，是一個(gè)片段區(qū)域，和selection一樣，有開始點(diǎn)，和結(jié)束點(diǎn)，當(dāng)我們對文字按下左鍵向右拉的時(shí)候，就看到了文字變成藍(lán)色，那個(gè)就是光標(biāo)的開始和結(jié)束，當(dāng)我們直接點(diǎn)一下的時(shí)候，光標(biāo)在閃，其實(shí)只是開始和結(jié)束點(diǎn)重疊了。

OK，現(xiàn)在我們來實(shí)際操作光標(biāo)了。直接看完整的代碼，然后看效果吧。

<!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">發(fā)送表情</button>

    <script>
        var sendEmoji = document.getElementById('sendEmoji')        // 定義最后光標(biāo)對象
        var lastEditRange;        // 編輯框點(diǎn)擊事件
        document.getElementById('edit').onclick = function() {            // 獲取選定對象
            var selection = getSelection()            // 設(shè)置最后光標(biāo)對象
            lastEditRange = selection.getRangeAt(0)
        }        // 編輯框按鍵彈起事件
        document.getElementById('edit').onkeyup = function() {            // 獲取選定對象
            var selection = getSelection()            // 設(shè)置最后光標(biāo)對象
            lastEditRange = selection.getRangeAt(0)
        }        // 表情點(diǎn)擊事件
        document.getElementById('sendEmoji').onclick = function() {            // 獲取編輯框?qū)ο?
            var edit = document.getElementById('edit')            // 獲取輸入框?qū)ο?
            var emojiInput = document.getElementById('emojiInput')            // 編輯框設(shè)置焦點(diǎn)
            edit.focus()            // 獲取選定對象
            var selection = getSelection()            // 判斷是否有最后光標(biāo)對象存在
            if (lastEditRange) {                // 存在最后光標(biāo)對象，選定對象清除所有光標(biāo)并添加最后光標(biāo)還原之前的狀態(tài)
                selection.removeAllRanges()
                selection.addRange(lastEditRange)
            }            // 判斷選定對象范圍是編輯框還是文本節(jié)點(diǎn)
            if (selection.anchorNode.nodeName != '#text') {                // 如果是編輯框范圍。則創(chuàng)建表情文本節(jié)點(diǎn)進(jìn)行插入
                var emojiText = document.createTextNode(emojiInput.value)                
                if (edit.childNodes.length > 0) {                    // 如果文本框的子元素大于0，則表示有其他元素，則按照位置插入表情節(jié)點(diǎn)
                    for (var i = 0; i < edit.childNodes.length; i++) {                        if (i == selection.anchorOffset) {
                            edit.insertBefore(emojiText, edit.childNodes[i])
                        }
                    }
                } else {                    // 否則直接插入一個(gè)表情元素
                    edit.appendChild(emojiText)
                }                // 創(chuàng)建新的光標(biāo)對象
                var range = document.createRange()                // 光標(biāo)對象的范圍界定為新建的表情節(jié)點(diǎn)
                range.selectNodeContents(emojiText)                // 光標(biāo)位置定位在表情節(jié)點(diǎn)的最大長度
                range.setStart(emojiText, emojiText.length)                // 使光標(biāo)開始和光標(biāo)結(jié)束重疊
                range.collapse(true)                // 清除選定對象的所有光標(biāo)對象
                selection.removeAllRanges()                // 插入新的光標(biāo)對象
                selection.addRange(range)
            } else {                // 如果是文本節(jié)點(diǎn)則先獲取光標(biāo)對象
                var range = selection.getRangeAt(0)                // 獲取光標(biāo)對象的范圍界定對象，一般就是textNode對象
                var textNode = range.startContainer;                // 獲取光標(biāo)位置
                var rangeStartOffset = range.startOffset;                // 文本節(jié)點(diǎn)在光標(biāo)位置處插入新的表情內(nèi)容
                textNode.insertData(rangeStartOffset, emojiInput.value)                // 光標(biāo)移動(dòng)到到原來的位置加上新內(nèi)容的長度
                range.setStart(textNode, rangeStartOffset + emojiInput.value.length)                // 光標(biāo)開始和光標(biāo)結(jié)束重疊
                range.collapse(true)                // 清除選定對象的所有光標(biāo)對象
                selection.removeAllRanges()                // 插入新的光標(biāo)對象
                selection.addRange(range)
            }            // 無論如何都要記錄最后光標(biāo)對象
            lastEditRange = selection.getRangeAt(0)
        }    </script></body></html>

以上就是html規(guī)定元素內(nèi)容是否可編輯的屬性contenteditable的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。