Recent pages in the cottage a micro-channel products for the div with contenteditable attribute to do the edit box has a lot of experience, the desire to help the students into the pit.
Ado, let's understand how HTML cursor object works, I will be affixed to the back of the complete DEMO codes, do not worry, go to understand in order to make more good typing experience.
Inside HTML, the cursor is an object, the object is only cursor when you select an element of time will appear.
When we went to click on an input box, when in fact it will produce a selected object -selection (that we can see the text into that zone of blue), selection in the Firefox browser can be used directly window.getSelection () acquisition, inside HTML, only a selection, and selection is an area you can imagine as a rectangle, it is the beginning and end of
When you click on an input box, or you switch to another input boxes, selection will follow the change. The cursor is inside the selection cursor called the range, is a fragment of the region, and selection, have a beginning point and an end point, when we press the left button to pull to the right of the text, to see the text turns blue, that is the beginning and end of the cursor, when we look at the direct point, the cursor blinking is only the start and end point of overlap.
OK, now we come to the actual operation of the cursor. Direct look at the complete code, then look at the effect of it.
<!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>
Reprinted: https://segmentfault.com/a/1190000005869372