JavaScript Range setStart 不适用于“粗体”文本

Question

我想手动设置光标/插入符号的位置。如果内容只是 contenteditable 中的文本，则此方法可以正常工作。但是，如果内容包含带有粗体、下划线等的文本，则它无法正常工作并且会抛出错误

Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 2.

在下面的示例中，如果您在节点编号中输入“0”，则光标会移动。但是，如果您在节点编号中输入“1”，则会引发错误。将光标移到粗体文本上有什么问题。

  button.onclick = () => {
    let range = new Range();

    range.setStart(p.childNodes[node.value], start.value);
  
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(range);
  };

<p id="p" contenteditable="true">This is <b>bold</b></p>

Cursor Position <input id="start" type="number" value="2">  Node number <input id="node" type="number" value="0">
<button id="button">Mover Cursor</button>

Answer 1

在您的示例中，p.childNodes[1] 解析为节点 <b>bold</b>。您只能跳转到其文本的开头或结尾（索引 0 和 1），因为您正在查看整个节点。如果你想在这个节点内设置光标，你必须访问它的实际文本内容。

虽然不适用于更复杂的情况，但这应该会推动您朝着正确的方向前进：

let childNode = p.childNodes[node.value];
while (childNode.hasChildNodes()) {
  childNode = childNode.firstChild;
}
    
range.setStart(childNode, start.value);