最近在山寨一款网页微信的产物，关于div用contenteditable属性做的编辑框有不少心得，愿望能够帮到入坑的同砚。
空话不多说了，我们先来明白一下HTML的光标对象是怎样事情的，背面我会贴完全的DEMO代码，不必急，先去明白，才做出更加好的输入体验。
在HTML内里，光标是一个对象，光标对象是只要当你选中某个元素的时刻才会涌现的。
当我们去点击一个输入框的时刻，实际上它会发生一个选中对象-selection（就是我们能够看到的笔墨变成蓝色的谁人地区），selection在火狐浏览器能够直接用 window.getSelection()猎取，在HTML内里，selection只要一个的，而且selection是一个地区，你能够设想成一个长方形，它是有最先和完毕的
当你点击一个输入框，或许你切换到别的输入框，selection是会随着变化的。光标就是在selection内里，光标叫做range，是一个片断地区，和selection一样，有最先点，和完毕点，当我们对笔墨按下左键向右拉的时刻，就看到了笔墨变成蓝色，谁人就是光标的最先和完毕，当我们直接点一下的时刻，光标在闪，实在只是最先和完毕点堆叠了。
OK，如今我们来实际操作光标了。直接看完全的代码，然后看结果吧。
<!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>