JS获取光标位置：Selection与Range对象详解及代码实现

1.概念和原理

DOM 标准并未提供直接获取光标位置的方法，因此需要采用间接方式来实现。我们可以利用 DOM 支持获取光标选中范围这一特性作为切入点，从而定位或获取光标的具体位置。当选取范围的起始点和结束点重合时，该位置即为光标的插入点。

1.1 术语

anchor（锚点）：表示选区的起始位置。
focus（焦点）：表示选区的结束位置。
range（范围）：表示选区的范围，可以包含整个节点或节点的一部分。

1.2 Selection

Selection 对象用于表示用户选择的文本范围或插入符号（光标）的位置。

经过实验验证，Selection 选取的节点范围通常限于块级节点。input 和 textarea 元素不能作为 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：判断起始位置是否重合。
endContainer：range 终点节点。
endOffset：range 的终点位置。
startContainer：range 起点节点。
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 获取光标位置内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript 获取与设置光标位置完整指南