可编辑div中包含子元素时获取光标位置不准确的问题

前言：

高亮显示输入框中的关键字符，这就必须得用到可编辑div(或其他标签)元素了，这时我们需要获取光标的位置，以便插入字符。

正文：

正常情况下获取光标位置，代码如下：

 function getPointPorsiton1() {

     if (window.getSelection) {

         var range = window.getSelection().getRangeAt(0);//创建range

     }

     else if (document.selection) {

          var range = document.selection.createRange();//创建选择对象

     }

     return range.endOffset;

 }

　　在可编辑元素中只有文本的情况下，这样写没有问题，但是！！！，当元素内含有标签时，返回如下图

　　而我们真正需要的拿到的位置是5（“示例”后有个空格^_^），或者拿到光标前html的长度。

　　获取光标前文本长度，代码如下：

 function getPointPositon2() {

     if (window.getSelection) {

         var range = window.getSelection().getRangeAt(0);//创建range

     }

     else if (document.selection) {

         var range = document.selection.createRange();//创建选择对象

     }

     var end = range.endOffset;

     var preElement = range.endContainer;

     while(preElement.previousSibling){

         end += preElement.previousSibling.textContent.length;

         preElement = preElement.previousSibling;

     }

     return end;

 }

　　获取光标前html长度，代码如下：

 function getPointPositon3() {

     if (window.getSelection) {

         var range = window.getSelection().getRangeAt(0);//创建range

     }

     else if (document.selection) {

         var range = document.selection.createRange();//创建选择对象

     }

     var end = range.endOffset;

     var preElement = range.endContainer;

     while(preElement.previousSibling){

         if(preElement.previousSibling.outerHTML){

             end += preElement.previousSibling.outerHTML.length;

         }else{

             end += preElement.previousSibling.textContent.length;

         }

         preElement = preElement.previousSibling;

     }

     return end;

 }

　　最终效果图如下：

参考文章：http://www.zhangxinxu.com/wordpress/?p=1591

巴特西

可编辑div中包含子元素时获取光标位置不准确的问题

前言：

正文：

最新文章

热门文章