我有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元素的内容开始算起）

任何人都可以想出解决方案吗？

---

UPDATE

我写了一个更简单的版本，它也适用于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;
}

---

这是一篇非常古老的文章，但仍然是在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长度。

---

如果你想插入元素，那么你可以尝试做这样的事情：

// Get range
var range = document.caretRangeFromPoint(event.clientX, event.clientY);
if (range)
  range.insertNode(elementWhichYouWantToAddToContentEditable);

链接地址: http://www.djcxy.com/p/65461.html

上一篇: Get caret (cursor) position in contentEditable area containing HTML content

下一篇: Get a range's start and end offset's relative to its parent container