子节点上的可信集合carret

Question

我试图在<i>内的contenteditable标记后设置carret时遇到一些困难。

这就是我所拥有的：

<p contenteditable="true"><i>H</i><i>e</i><i>l</i><i>l</i><i>o</i></p>

我怎么把卡雷尔放在...之后让我们说第3 <i>个标签？

我已经尝试过这个解决方案：

var el = document.getElementsByTagName('p')[0];
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[0], 3);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();

但我不知道如何使用<i>标签的位置而不是字符。

Answer 1

var el = document.getElementsByTagName('p')[0];
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[3], 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();

<p contenteditable="true"><i>H</i><i>e</i><i>l</i><i>l</i><i>o</i></p>

在p中有5个子节点，如果要在子节点上设置插入符，请使用range.setStart(el.childNodes[3], 0);