[英]how to get the position of the cursor in an editable div
我有以下函数可跟踪可编辑div中的光标位置:
function getCaretPosition(editableDiv) {
var caretPos = 0, containerEl = null, sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == editableDiv) {
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
}
}
return caretPos-1;
}
问题是,如果我的可编辑div具有以下html:
hello <span contenteditable='false'>Abderrahmane Benbachir</span>
然后将光标放在跨度旁边,它从0开始计数光标。为什么? 我该如何解决?
在这种情况下,要获得插入符位置,请改用此Tim Down的代码 。 其中还具有restoreSelection
功能,可恢复插入符号的位置。
最近我问了同样的问题,您可以在这里检查。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.