Question

我需要在contentEditable div中获取光标位置。我从Get a range's start and end offset's relative to its parent container和https://stackoverflow.com/a/4770562/2008261获得了一些有用的功能。

但是这些功能没有帮助，因为我需要HTML中的实际位置，这就是我需要的。

如果我有：

<div id="diva" contenteditable="true">Insert <b>text here</b></div>

我把光标放在单词“text”之前它返回7，因为它处理文本。但我需要它返回10，好像它处理contentEditabe div的内部HTML。

这些是我之前提到的功能：

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;
}

Answer 1

之前必须解决这个问题（我创建了一个基于Web的文字处理器）：唯一可行的解决方案是走DOM树并计算innerHTML和outerHTML长度，然后使用范围内的偏移量（如果有的话）

我也非常不鼓励使用contentEditable实现，你会花费更多的时间来修复它们的错误并试图覆盖它们的行为，而不是编码你真正想要的功能。

我的实现是一个函数，它接受一个范围偏移并向上走，直到它达到指定的边界父级。有些事情需要记住，以前的兄弟姐妹很容易添加，但包装父母很难用属性等来解释。

我的计算是取节点"<div id="" class="" foo="bar">sometext</div>"的整个长度，减去innerHTML的长度，减去tagname的长度，然后subtract 3得到<div id="" class="" foo="bar">

的长度

但是，除非您控制HTML的创建，否则您的计数可能仍然是错误的，因为在测试长度时，连续浏览器中的多个空格将返回为1个字符或多个字符。

如何在包含HTML的contentEditable中获取光标位置？

1 个答案: