Question

我想在内容可编辑元素中设置插入位置，但它似乎无效。

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

<div contenteditable>Hi ! How are you doing ?</div>

Answer 1

试试这个：
只需用range.setStart（el.childNodes [0]，2）替换range.setStart（el，2）

＆＃13;

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

＆＃13;

<div contenteditable>Hi ! How are you doing ?</div>

＆＃13;

您正在将错误的节点传递给setStart函数。需要传递文本节点。

Answer 2

如果startNode是Text，Comment或CDATASection类型的节点，则startOffset是startNode开头的字符数。对于其他节点类型，startOffset是startNode开头之间的子节点数。

如果它不是textarea，它会使子元素抵消。

您可以在满足的条件中设置不同的元素，如下所示：

<div contenteditable>
<p>para 1</p>
<p>para 2</p>
<p>para 3</p>
<p>para 4</p>
</div>
<script>
    var el = document.getElementsByTagName('div')[0];
    var p = document.querySelector('p');
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el, 3);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
</script>

在内容可编辑元素中设置插入符位置

2 个答案: