可編輯DIV光標定位

為何需要光標定位

當一個DIV標簽添加contenteditable=“true” 的屬性值的時候，就會將該標簽變成一個可編輯的輸入框，如果僅是輸入文字，完全可以滿足需求，但是當我們要插入一張圖片的時候（如表情），那么這時候我們將無法知道我們將表情圖片插入到哪個位置中，這時候就需要記錄DIV中的光標的位置，方便下次插入。
下面介紹的主要是微信網頁中出現的問題：div可編輯框每次獲取焦點的時候都會觸發手機鍵盤的彈出，但是一般的網頁中無法隱藏手機鍵盤彈出，js的操作是做不到的。
如果我們使用的是<input type="text" readonly/> 其中readonly屬性可以不彈出鍵盤（常用的weui框架中常用這個屬性來阻止鍵盤彈出）但無法顯示表情並非我們所需，可是DIV沒有這個屬性所以我們就需要通過光標定位來保存光標的位置，同時還需要將焦點狀態失去才滿足需求。

手機網頁可編輯DIV光標定位流程

簡單說下流程： 獲取焦點---》保存光標位置----》失去焦點----》添加內容（光標位置確定）

代碼說明

本代碼主要是總結項目中用到代碼

   //判斷光標
   if (!window._range) {
     $(divElement).focus();//獲取焦點
        saveRange();//保存光標位置
     $(divElement).blur();//失去焦點
                }

       insertContent(insertHtml);//指定位置插入內容
        $(divElement).blur();//失去焦點

   //保存光標位置
    function saveRange() {
         var selection = window.getSelection ? window.getSelection() : document.selection;
         if (!selection.rangeCount) return;
         var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
         window._range = range;
        }
        //插入內容
     function insertContent(str) {
         var selection, range = window._range;
         if (!window.getSelection) {
              range.pasteHTML(str);
              range.collapse(false);
              range.select();
         } else {
              selection = window.getSelection ? window.getSelection() : document.selection;
              range.collapse(false);
              var hasR = range.createContextualFragment(str);
              var hasR_lastChild = hasR.lastChild;
              while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
                    var e = hasR_lastChild;
                    hasR_lastChild = hasR_lastChild.previousSibling;
                    hasR.removeChild(e);
              }
                range.insertNode(hasR);
                if (hasR_lastChild) {
                    range.setEndAfter(hasR_lastChild);
                    range.setStartAfter(hasR_lastChild);
                }
                selection.removeAllRanges();
                selection.addRange(range);
            }
            
        };

總結

以上的方法能解決選擇表情的時候，不會觸發手機的鍵盤彈出。感謝工作中的同事指導！