html规定元素内容是否可编辑的属性contenteditable

web前端|html教程 实例一段可编辑的段落：

这是一个可编辑的段落。

浏览器支持

IE

Firefox

Chrome

Safari

Opera

所有主流浏览器都支持 contenteditable 属性。

定义和用法

contenteditable 属性规定元素内容是否可编辑。

注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。

HTML 4.01 与 HTML5 之间的差异

contenteditable 属性是 HTML5 中的新属性。

语法

属性值

值	描述
true	规定元素可编辑。
false	规定元素不可编辑。

在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。

当我们去点击一个输入框的时候，实际上它会产生一个选中对象-selection（就是我们可以看到的文字变成蓝色的那个区域），selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开始和结束的

当你点击一个输入框，或者你切换到别的输入框，selection是会跟着变化的。光标就是在selection里面，光标叫做range，是一个片段区域，和selection一样，有开始点，和结束点，当我们对文字按下左键向右拉的时候，就看到了文字变成蓝色，那个就是光标的开始和结束，当我们直接点一下的时候，光标在闪，其实只是开始和结束点重叠了。

OK，现在我们来实际操作光标了。直接看完整的代码，然后看效果吧。

#edit{height:500px;width:500px;border:1px solid red;}

发送表情 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