如何在 contenteditable span 中设置光标位置答案

【问题标题】：How to set cursor position in contenteditable span如何在 contenteditable span 中设置光标位置
【发布时间】：2013-09-13 00:55:37
【问题描述】：

我有一个跨度，双击它后就可以编辑了。但是，由于双击而选择了一些文本，我使用以下代码删除了该选择：

function removeSelectedText(element) {
if (window.getSelection || document.getSelection) {
    oSelection = (window.getSelection ? window:document).getSelection();
    oSelection.removeAllRanges();
} else {
    document.selection.empty();
}
}

此操作后，现在可编辑的非选定范围失去焦点。我只想将插入符号移动到跨度中最后点击的位置。我尝试了下面的代码但没有用（'element' 是 span 本身）：

...
var selection = (window.getSelection ? window:document).getSelection();
var position = selection.getRangeAt(0).focusOffset;
element.focus();

var range = document.createRange();
range.setStart(element, position);
range.setEnd(element, position);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);

我尝试了我发现的任何东西，但无法正常工作。由于沮丧，我无法再集中注意力。如果你能帮助我，那就太棒了......

更新：在range.setStart() 和range.setEnd() 中，应使用element.firstChild 而不是element。

【问题讨论】：

Related stackoverflow.com/q/6249095 ，您的一些代码似乎来自那里的答案，您的问题可能是由于您试图计算为“位置”； focusOffset 不是您想要的值。也许你想要element.textContent.length。
好吧，当我使用range.setStart(element.firstNode, 5) 时，它可以工作......但是我无法按照你所说的那样获得双击结束的位置。
阅读更多关于范围的信息。对于每个范围边界，偏移量是相对于包含边界的最深节点的。
也许最好将光标设置在开头而不是在双击跨度后试图将鼠标指针放在哪里。你怎么看？

标签： javascript jquery selection contenteditable caret

【解决方案1】：

一个类似的问题及其解决方案是here，考虑到我昨天的攻击性搜索，我很惊讶在搜索的第二天找到它。欢迎任何更好的解决方案，因为即使这个解决方案也无法在第一次双击时绕过文本选择。

【讨论】：