最近在山寨一款網頁微信的產品，對於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>