在 Chrome/webkit 的 contenteditable div 层中设置插入符号位置

【问题标题】：Set caret position in contenteditable div layer in Chrome/webkit在 Chrome/webkit 的 contenteditable div 层中设置插入符号位置
【发布时间】：2022-03-17 00:47:46
【问题描述】：

我正在尝试在 contenteditable div 层中设置插入符号的位置，经过一番网络搜索和试验后，我使用它在 Firefox 中工作：

function set(element,position){
    element.focus();
    var range= window.getSelection().getRangeAt(0);
    range.setStart(element.firstChild,position);
    range.setEnd(element.firstChild,position);
}

[...]

set(document.getElementById("test"),3);

但在 Chrome/webkit 中，它会选择 div 中的所有内容。这是 webkit 的错误还是我做错了什么？
提前谢谢你。

【问题讨论】：

标签： javascript html contenteditable caret

【解决方案1】：

如果节点是文本节点，则节点内 Range 边界的偏移量只是字符偏移量。如果节点是元素，则偏移量是边界之前的子节点数。

例如，如果你有 HTML

<div id="myDiv">One <b>two</b> three</div>

...然后您创建一个 Range，如下所示：

var range = document.createRange();
var myDiv = document.getElementById("myDiv");
range.setStart(myDiv, 1);
range.setEnd(myDiv, 1);

...你会得到一个 Range，它在 div 的第一个孩子之后立即开始和结束，这是一个文本节点：

<div id="myDiv">One |<b>two</b> three</div>

【讨论】：