1. 默認(rèn)鍵盤或者鼠標(biāo)事件的動作
   • 準(zhǔn)備實(shí)現(xiàn)：通過Backspace按鍵刪除節(jié)點(diǎn)（8），節(jié)點(diǎn)刪除后减宣，光標(biāo)移動到上一節(jié)點(diǎn)最后
   • 存在問題：刪除節(jié)點(diǎn)（8）后杖们，光標(biāo)移動到上一節(jié)點(diǎn)了，但是上一節(jié)點(diǎn)的最后的文字被吃點(diǎn)一個岭皂，具體見圖
     
     1.gif
   • 原因分析: 關(guān)鍵是javascript的事件的默認(rèn)動作問題，由于按Backspace的默認(rèn)動作是刪除字符沼头，chrome在沒有通過document.createRange()設(shè)置range的情況下爷绘，按Backspace的刪除動作是，在本節(jié)點(diǎn)內(nèi)容全部刪除完畢后进倍，直接到上一節(jié)點(diǎn)的最前端土至，而這時，第二個刪除動作其實(shí)在新的節(jié)點(diǎn)上也發(fā)生了猾昆，只是由于光標(biāo)已經(jīng)在最前端陶因，所以刪無可刪，而當(dāng)通過代碼將光標(biāo)移動到最末端時垂蜗，這個按Backspace的刪除將被執(zhí)行坑赡，所以會刪除最后一個字符。
   • 解決辦法：在設(shè)置光標(biāo)移動到最后位置后么抗，設(shè)置e.preventDefault()取消默認(rèn)事件。
2. 如何在一個使用contenteditable屬性的div標(biāo)簽中亚铁，定位光標(biāo)的位置
   • 光標(biāo)的說明: 在HTML里面蝇刀，光標(biāo)是一個對象，光標(biāo)對象是只有當(dāng)你選中某個元素的時候才會出現(xiàn)的徘溢。
     當(dāng)我們?nèi)c(diǎn)擊一個輸入框的時候吞琐，實(shí)際上它會產(chǎn)生一個選中對象-selection（就是我們可以看到的文字變成藍(lán)色的那個區(qū)域）捆探，selection在火狐瀏覽器可以直接用 window.getSelection()獲取，在HTML里面站粟，selection只有一個的黍图，并且selection是一個區(qū)域，你可以想象成一個長方形奴烙，它是有開始和結(jié)束的
     當(dāng)你點(diǎn)擊一個輸入框助被，或者你切換到別的輸入框，selection是會跟著變化的切诀。光標(biāo)就是在selection里面揩环，光標(biāo)叫做range，是一個片段區(qū)域幅虑，和selection一樣丰滑，有開始點(diǎn)，和結(jié)束點(diǎn)倒庵，當(dāng)我們對文字按下左鍵向右拉的時候褒墨，就看到了文字變成藍(lán)色，那個就是光標(biāo)的開始和結(jié)束擎宝，當(dāng)我們直接點(diǎn)一下的時候郁妈，光標(biāo)在閃，其實(shí)只是開始和結(jié)束點(diǎn)重疊了认臊。(這段文字摘自https://segmentfault.com/a/1190000005869372 ）

var getCaretPosition = function(oField) {
    var iCaretPos = 0;
    var doc = oField.ownerDocument || oField.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(oField);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            iCaretPos = preCaretRange.toString().length;
        }
    } else if ((sel = doc.selection) && sel.type !== 'Control') {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(oField);
        preCaretTextRange.setEndPoint('EndToEnd', textRange);
        iCaretPos = preCaretTextRange.text.length;
    }
    return (iCaretPos);
};

3. 如何在一個使用contenteditable屬性的div標(biāo)簽中圃庭，移動光標(biāo)的位置
   • 實(shí)現(xiàn)步驟（僅針對chrome瀏覽器，其他沒測試）
     1. 創(chuàng)建一個一個Range對象
     2. 設(shè)置Range所針對的元素對象
     3. 設(shè)置Range前后位置可以重疊
     4. 設(shè)置Range開始（開始結(jié)束一樣）
     5. 設(shè)置Range結(jié)束(這個決定了光標(biāo)移動到的具體位置）
     6. 設(shè)置選區(qū)
     7. 清除選區(qū)中的所有范圍
     8. 將Range加入到選區(qū)中失晴。
   • 代碼示例
     
     2017-06-26_125347.png