JavaScript 中获取光标位置
JavaScript 中获取光标位置
1.概念和原理
DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置，当选取范围起始点和结束点一样时，就是光标插入的位置。
1.1. 术语
anchor：选区起点。
focus：选区终点。
range：选区范围，包含整个节点或节点的一部分。
1.2. 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;
}
// 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 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. 示例
<!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;
// 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;
}
</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>