js获取光标位置的最新方法

更新时间：2023年09月27日 10:36:12 作者：_呆

这篇文章主要给大家介绍了关于js获取光标位置的最新方法,获取光标位置,最常用的方法就是使用Selection对象和Range对象,文中通过代码介绍的非常详细,需要的朋友可以参考下

1.概念和原理

DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置。当选取范围起始点和结束点一样时，就是光标插入的位置。

1.1 术语

anchor(瞄点)：选区起点。
focus(焦点)：选区终点。
range(范围)：选区范围，包含整个节点或节点的一部分。

1.2 Selection

Selection: Selection对象表示用户选择的文本范围或插入符号的位置。

经过实验发现Selection选取的节点范围都是块级节点。input 和 texteare 并不能作为Selection的节点

Selection对象存在于window对象上，可以通过window.getSelection()获取示例。

属性：

anchorNode: 选区起点的节点。
anchorOffset:选区的起点位置。
focusNode:选区终点的节点。
focusOffset:选区的终点位置。
isCollapsed:起点和终点是否重叠。
rangeCount:选区包含的range数目。

方法

getRangeAt(index):获取指定的选取范围。
addRange(range):将一个范围添加到Selection对象中。
removeRange():移出指定的范围。
removeAllRanges():移出所有range对象。
collapse(parentNode,offset):将光标移动到parentNode节点的offset位置。
collapseToStart():取消当前选区，并把光标定位在原选区的最开始处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。
collapseToEnd():取消当前选区，并将光标定位到原选取的最末位。如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。
extend(node,offset):将终点位置移动到node节点的offset位置。
modify(alter,direction,granularity):通过alter方式(move/extend)来改变光标位置，移动方向为direction(left/right)，移动单位为granularity。
containsNode(aNode,aPartlyContained):判断aNode是否包含在Selection中。aPartlyContained为false表示全包含，为true表示只要部分包含即可。
toString():放回当前Selection对象的字符串。

1.3 Range

Range对象表示一个Selection的选择范围，一个Selection可以包含多个Range。

获取对象

document.createRange():创建一个Range。

selection.getRangeAt(index):获取指定的Range。

属性

collapsed:判断起始位置是否重合。
endContaniner:range终点节点。
endOffset:range的终点位置。
startContaniner:ranstartge起点节点。
startOffset:range的起点位置。
commonAncestorContainer:包含起始点的节点。

方法

setStart(startNode,startOffset):设置范围在startNode的起始位置为startOffset。
setEnd(endNode,endOffset):设置范围在endNode的起始位置为endOffset。
selectNode(referenceNode):设置range的节点为referenceNode。
selectNodeContents(referenceNode):设置range的内容为referenceNode。
collapse(toStart):向边界点折叠range，即是设置光标位置，toStart默认为false，表示光标定位在节点末尾。true表示光标定位在节点起点。
cloneContents():克隆一个range的内容片段。
deleteContents():删除range的内容片段。
extractContents():将range的内容从文档树移动到文档片段中。
insertNode(newNode):在range的其实位置插入新的节点。
surroundContents(newNode):将range对象的内容移动到新的节点中。
cloneRange():克隆一个range对象。
detach():释放当前range。

1.4 input/textarea

在html5中，可输入性表单元素（input/textarea）都存在以下属性。不支持IE6/7。

selectionDirection:forward | backward | none,选区方向
selectionEnd:选区终点位置
selectionStart:选区起点位置
setSelectionRange(selectionStart, selectionEnd, [selectionDirection]):设置获取焦点的输入性元素的选区范围。

2.获取光标位置

2.1 可编辑div获取光标位置

//获取当前光标位置
const getCursortPosition = function (element) {
  var caretOffset = 0;
  var doc = element.ownerDocument || element.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(element);//设置选中区域的节点内容为当前节点
      preCaretRange.setEnd(range.endContainer, range.endOffset);  //重置选中区域的结束位置
      caretOffset = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {//IE
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
  }
  return caretOffset;
}

获取光标的位置是先通过获取鼠标的选取范围，然后克隆该选取范围，修改克隆范围的结束位置，这样克隆的范围就只剩下起点到结束点的内容，光标之后的内容被截取扔掉了。所以可以通过剩余内容的长度来确定光标位置。之所以要克隆一个选取范围出来，是为了避免修改光标结束位置时影响到原先内容。

2.2 input/textarea获取光标位置

//输入框获取光标
const getPosition = function (element) {
    let cursorPos = 0;
    if (document.selection) {//IE
        var selectRange = document.selection.createRange();
        selectRange.moveStart('character', -element.value.length);
        cursorPos = selectRange.text.length;
    } else if (element.selectionStart || element.selectionStart == '0') {
        cursorPos = element.selectionStart;
    }
    return cursorPos;
}

3.设置光标位置

3.1 可编辑div设置光标位置

//设置光标位置
const setCaretPosition = function (element, pos) {
  var range, selection;
  if (document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
  {
    range = document.createRange();//创建一个选中区域
    range.selectNodeContents(element);//选中节点的内容
    if(element.innerHTML.length > 0) {
      range.setStart(element.childNodes[0], pos); //设置光标起始为指定位置
    }
    range.collapse(true);       //设置选中区域为一个点
    selection = window.getSelection();//获取当前选中区域
    selection.removeAllRanges();//移出所有的选中范围
    selection.addRange(range);//添加新建的范围
  }
  else if (document.selection)//IE 8 and lower
  {
    range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
    range.moveToElementText(element);//Select the entire contents of the element with the range
    range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
    range.select();//Select the range (make it the visible selection
  }
}

3.2 input/textarea获取光标位置

// 设置光标位置
function setCaretPosition(textDom, pos){
    if(textDom.setSelectionRange) {
        // IE Support
        textDom.focus();
        textDom.setSelectionRange(pos, pos);
    }else if (textDom.createTextRange) {
        // Firefox support
        var range = textDom.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

4.示例

<html>
<head>
  <title>光标测试</title>
  <style>
    p {
      display: flex;
      flex-direction: row;
    }
    .btn {
      height: 24px;
      margin: 0 10px;
    }
    .edit-div {
      display: inline-block;
      width: 225px;
      border: 1px solid #decdcd;
    }
  </style>
  <script>
    function getCursortPosition(e) {
      var eleP = e.target.parentNode; //获取父级元素
      var pos = 0;
      if (e.target.nodeName == "DIV") {
        pos = getDivPosition(e.target);
      } else {
        pos = getPosition(e.target);
      }
      var spanEle = (eleP.childNodes)[7];
      spanEle.innerText = pos;
    }
    //可编辑div获取坐标
    const getDivPosition = function (element) {
      var caretOffset = 0;
      var doc = element.ownerDocument || element.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(element);//设置选中区域的节点内容为当前节点
          preCaretRange.setEnd(range.endContainer, range.endOffset);  //重置选中区域的结束位置
          caretOffset = preCaretRange.toString().length;
        }
      } else if ((sel = doc.selection) && sel.type != "Control") {//IE
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
      }
      return caretOffset;
    }
    //输入框获取光标
    const getPosition = function (element) {
      let cursorPos = 0;
      if (document.selection) {//IE
        var selectRange = document.selection.createRange();
        selectRange.moveStart('character', -element.value.length);
        cursorPos = selectRange.text.length;
      } else if (element.selectionStart || element.selectionStart == '0') {
        cursorPos = element.selectionStart;
      }
      return cursorPos;
    }
  </script>
</head>
	<body>
      <p>
    <label>输入框测试:</label>
    <input type="text" style="width:220px" onclick="getCursortPosition(event);" />
    <span>光标位置:</span>
    <span></span>
  </p>
  <p>
    <label>文本框测试:</label>
    <textarea rows="5" style="width:220px" onclick="getCursortPosition(event);"></textarea>
    <span>光标位置:</span>
    <span></span>
  </p>
  <div>
    <label>可编辑div:</label>
    <div contenteditable="true" class="edit-div" onclick="getCursortPosition(event);"></div>
    <span>光标位置:</span>
    <span></span>
  </div>
</body>
</html>

总结

到此这篇关于js获取光标位置的文章就介绍到这了,更多相关js获取光标位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

禁止JS运行的代码
如果我们要让页面上的javascript不运行，方法最简单的就是使用noscript标签，经常被用来屏蔽那些免费空间要加上的JS。
2011-01-01
ES6新增的数组知识实例小结
这篇文章主要介绍了ES6新增的数组知识,结合实例形式分析了ES6的数组新增知识点、使用技巧与相关注意事项,需要的朋友可以参考下
2020-05-05
Javascript中apply、call、bind的巧妙使用
Javascript中apply、call、bind都是为了改变函数体内部 this 的指向。下面通过本文重点给大家介绍js中apply，call，bind的巧妙使用方法，感兴趣的朋友一起学习吧
2016-08-08
javascript和jQuery实现网页实时聊天的ajax长轮询
在做网页实时聊天的时候常常需要长轮询，本文由于采用原生的JS及AJAX，所以简单易懂，通过这篇文章就可以建立一个简单的聊天室程序。
2016-07-07
原生js实现照片墙效果
这篇文章主要介绍了原生js实现照片墙效果，帮助大家更好的利用js制作特效，感兴趣的朋友可以了解下
2020-10-10
js编写贪吃蛇的小游戏
本文为大家介绍的是使用JS写的贪吃蛇游戏，个人练习之用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习js有所帮助
2015-12-12
js实现动画特效的文字链接鼠标悬停提示的方法
这篇文章主要介绍了js实现动画特效的文字链接鼠标悬停提示的方法,实例分析了javascript操作css的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
这篇文章主要为大家详细介绍了javaScript实现鼠标在文字上悬浮时弹出悬浮层效果的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03
js 判断一组日期是否是连续的简单实例
下面小编就为大家带来一篇js 判断一组日期是否是连续的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
基于javascript html5实现3D翻书特效
这篇文章主要介绍了基于javascript html5实现翻书特效的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-03-03