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

2018-06-24 01:57:15来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前言:

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

正文:

        正常情况下获取光标位置,代码如下:

1 function getPointPorsiton1() {
2     if (window.getSelection) {
3         var range = window.getSelection().getRangeAt(0);//创建range
4     }
5     else if (document.selection) {
6          var range = document.selection.createRange();//创建选择对象
7     }
8     return range.endOffset;
9 }

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

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

  获取光标前文本长度,代码如下:

 1 function getPointPositon2() {
 2     if (window.getSelection) {
 3         var range = window.getSelection().getRangeAt(0);//创建range
 4     }
 5     else if (document.selection) {
 6         var range = document.selection.createRange();//创建选择对象
 7     }
 8     var end = range.endOffset;
 9     var preElement = range.endContainer;
10     while(preElement.previousSibling){
11         end += preElement.previousSibling.textContent.length;
12         preElement = preElement.previousSibling;
13     }
14     return end;
15 }

  获取光标前html长度,代码如下:

 
 1 function getPointPositon3() {
 2     if (window.getSelection) {
 3         var range = window.getSelection().getRangeAt(0);//创建range
 4     }
 5     else if (document.selection) {
 6         var range = document.selection.createRange();//创建选择对象
 7     }
 8     var end = range.endOffset;
 9     var preElement = range.endContainer;
10     while(preElement.previousSibling){
11         if(preElement.previousSibling.outerHTML){
12             end += preElement.previousSibling.outerHTML.length;
13         }else{
14             end += preElement.previousSibling.textContent.length;
15         }
16         preElement = preElement.previousSibling;
17     }
18     return end;
19 }

  最终效果图如下:

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:angular 设置年份选择下拉框,并默认今年

下一篇:一行JS搞定快速关机