在包含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

UPDATE

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

/sf/answers/336841571/

老答案

这实际上是比整个文档的文本中的字符偏移更有用的结果:startOffsetDOM范围的属性(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;
}

Answer 2

这是一篇非常古老的帖子,但仍然是在Google上搜索的第一个结果之一,所以可能仍然有用.考虑到html标签和换行符(在Firefox上测试),这对我来说也是合适的位置:

function getCaretPosition (node) {
    var range = window.getSelection().getRangeAt(0),
        preCaretRange = range.cloneRange(),
        caretPosition,
        tmp = document.createElement("div");

    preCaretRange.selectNodeContents(node);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    tmp.appendChild(preCaretRange.cloneContents());
    caretPosition = tmp.innerHTML.length;
    return caretPosition;
}

它使用cloneContents功能来获取实际的html并将documentfragment附加到临时div以获得html长度.