HTML attribute contenteditable that specifies whether the content of an element is editable-HTML Tutorial-php.cn

HTML attribute contenteditable that specifies whether the content of an element is editable

黄舟

Release： 2017-11-03 10:04:18

Original

3087 people have browsed it

Example

An editable paragraph:

<p contenteditable="true">这是一个可编辑的段落。</p>

Copy after login

Browser support

##IE

Firefox

Chrome

Safari

Opera

##All major browsers support the contenteditable

attribute

. Definition and usage

The contenteditable attribute specifies whether the content of the element is editable.

Note: If the element does not set the contenteditable attribute, the element will inherit this attribute from its parent element.

Differences between HTML 4.01 and HTML5

The contenteditable attribute is new in HTML5.

Syntax

<element contenteditable="true|false">

Copy after login

Attribute value

ValuetruefalseIn HTML, the cursor is an object, and the cursor object only appears when you select an element.

Description
Specifies that the element is editable.
Specifies that the element cannot be edited.

When we click on an input box, it will actually generate a selection object - selection (that is, the area where the text we can see turns blue), selection is in

Firefox The tool

can be obtained directly using window.getSelection(). In HTML, there is only one selection, and selection is an area. You can imagine it as a rectangle, which has a beginning and an end.When When you click on an input box or switch to another input box, the selection will change accordingly. The cursor is inside the selection. The cursor is called range. It is a fragment area. Like selection, it has a starting point and an ending point. When we press the left button on the text and pull it to the right, we will see that the text turns blue. That is the start and end of the cursor. When we click directly, the cursor flashes, but in fact it is just the start and end points that overlap.

OK, now let’s actually operate the cursor. Just look at the complete code and see the effect.

<!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(&#39;sendEmoji&#39;)        // 定义最后光标对象
        var lastEditRange;        // 编辑框点击事件
        document.getElementById(&#39;edit&#39;).onclick = function() {            // 获取选定对象
            var selection = getSelection()            // 设置最后光标对象
            lastEditRange = selection.getRangeAt(0)
        }        // 编辑框按键弹起事件
        document.getElementById(&#39;edit&#39;).onkeyup = function() {            // 获取选定对象
            var selection = getSelection()            // 设置最后光标对象
            lastEditRange = selection.getRangeAt(0)
        }        // 表情点击事件
        document.getElementById(&#39;sendEmoji&#39;).onclick = function() {            // 获取编辑框对象
            var edit = document.getElementById(&#39;edit&#39;)            // 获取输入框对象
            var emojiInput = document.getElementById(&#39;emojiInput&#39;)            // 编辑框设置焦点
            edit.focus()            // 获取选定对象
            var selection = getSelection()            // 判断是否有最后光标对象存在
            if (lastEditRange) {                // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
                selection.removeAllRanges()
                selection.addRange(lastEditRange)
            }            // 判断选定对象范围是编辑框还是文本节点
            if (selection.anchorNode.nodeName != &#39;#text&#39;) {                // 如果是编辑框范围。则创建表情文本节点进行插入
                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>

Copy after login

The above is the detailed content of HTML attribute contenteditable that specifies whether the content of an element is editable. For more information, please follow other related articles on the PHP Chinese website!