可编辑DIV光标定位

可编辑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);
            }
            
        };

总结

以上的方法能解决选择表情的时候，不会触发手机的键盘弹出。感谢工作中的同事指导！

转载于:https://www.cnblogs.com/yuanjee/p/5979895.html