javascript - 获取包含 HTML 内容的 contentEditable 区域中的插入符号(光标)位置

Question

我有 contentEditable 元素(可以是 p、div 等)，我想在其中获得插入符号(光标)位置。我通常可以用这段代码实现它:

var position = window.getSelection().getRangeAt(0).startOffset;

这在元素仅包含文本时工作正常。但是当元素包含一些 HTML 格式时，返回的位置是相对于包含的 HTML 元素中插入符号位置的。

假设 contentEditable 元素的内容是这样的:

AB<b>CD</b>EF

如果插入符号在里面<b></b> ，假设在C和D之间，上面代码返回的位置是1而不是3(从contentEditable元素的内容开始算起)

有人能想出解决办法吗？

Answer 1

更新

我写了一个更简单的版本，它也适用于 IE < 9:

https://stackoverflow.com/a/4812022/96100

旧答案

这实际上是一个比整个文档文本中的字符偏移更有用的结果:DOM 范围的 startOffset 属性(这就是 window.getSelection().getRangeAt () 返回)是相对于其 startContainer 属性的偏移量(顺便说一句，它不一定总是文本节点)。但是，如果您确实需要字符偏移量，这里有一个函数可以实现。

这是一个活生生的例子:http://jsfiddle.net/timdown/2YcaX/

函数如下:

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