JavaScript 中获取光标位置

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：判断起始位置是否重合。

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;}// IE浏览器} else if ((sel = doc.selection) && sel.type != "Control") {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;// IE浏览器if (document.selection) {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;// Firefox, Chrome, Opera, Safari, IE 9+if (document.createRange) {// 创建一个选中区域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);//IE 8 and lower}else if (document.selection){// 创建一个范围（范围与所选内容类似但不可见）range = document.body.createTextRange();// 选择范围的元素的全部内容range.moveToElementText(element);// 将范围折叠到终点range.collapse(false);// 选择范围range.select();}
}

3.2. input/textarea获取光标位置

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

4. 代码示例

<!DOCTYPT html><html><head><title>JavaScript 中获取光标位置</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;}// IE} else if ((sel = doc.selection) && sel.type != "Control") {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;// IEif (document.selection) {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>