Мне нужно получить позицию курсора в div contentEditable. Я получаю полезную функцию от Получить начальное и конечное смещение диапазона относительно его родительского контейнера и https://stackoverflow.com/a/4770562/2008261.
Но эти функции НЕ помогают, потому что мне нужна фактическая позиция в HTML. Вот что мне нужно.
если бы у меня был:
<div id="diva" contenteditable="true">Insert <b>text here</b></div>
и я ставлю курсор прямо перед словом «текст», он возвращает 7, поскольку имеет дело с текстом. Но мне нужно, чтобы он возвращал 10, как если бы он имел дело с внутренним HTML div contentEditabe.
Это функция, о которой я упоминал ранее:
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
if (typeof window.getSelection != "undefined") {
var range = window.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var textRange = document.selection.createRange();
var preCaretTextRange = document.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
И :
function getCharacterOffsetWithin(range, node) {
var treeWalker = document.createTreeWalker(
node,
NodeFilter.SHOW_TEXT,
function(node) {
var nodeRange = document.createRange();
nodeRange.selectNode(node);
return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
},
false
);
var charCount = 0;
while (treeWalker.nextNode()) {
charCount += treeWalker.currentNode.length;
}
if (range.startContainer.nodeType == 3) {
charCount += range.startOffset;
}
return charCount;
}