将光标设置在contenteditable中的两个字母之间

set cursor between 2 letters in contenteditable

本文关键字：两个 之间 设置 光标 contenteditable      更新时间：2023-09-26

如何将光标置于下面的a和b之间?

<div contenteditable = true id = "test">
  abcdefg
</div>

我试着玩范围，但没有什么是为我工作。下面的代码选择整个文本，并且没有光标。(此代码适用于Chrome)

sel =  window.getSelection();
range =  document.createRange();
node = document.getElementById("test");
range.setStart(node, 0);
range.setEnd(node, 1);
sel.addRange(range);

应该可以:

function setSelectionRange(aNode, aOffset) {
    aNode.focus();
    var sel     = window.getSelection(),
        range   = sel.getRangeAt(0);
    range.collapse(true);
    range.setStart(aNode.childNodes[0], aOffset),
    sel.removeAllRanges();
    sel.addRange(range);
}
setSelectionRange(document.getElementById("test"), 1);
http://jsfiddle.net/5a9uD/1/

如果您查看MDN文档https://developer.mozilla.org/en-US/docs/Web/API/range.setStart，您将看到该接口使用节点而不是元素。

相关文章：