html元素contenteditable屬性如何定位光標和設置光標

時間 2019-11-05

標籤 html 元素 contenteditable 屬性如何定位光標設置欄目 HTML 简体版

原文原文鏈接

最近在山寨一款網頁微信的產品，對於div用contenteditable屬性作的編輯框有很多心得，但願能夠幫到入坑的同窗。html

廢話很少說了，咱們先來理解一下HTML的光標對象是如何工做的，後面我會貼完整的DEMO代碼，不用急，先去理解，才能作出更加好的輸入體驗。node

在HTML裏面，光標是一個對象，光標對象是隻有當你選中某個元素的時候纔會出現的。瀏覽器

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

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

OK，如今咱們來實際操做光標了。直接看完整的代碼，而後看效果吧。code

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。