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

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，2）与range.setStart（el.childNodes [0]，2）

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();

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

您正在将错误节点传递给setStart f结。 需要传递文本节点。

Answer 2

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

如果不是textarea，它会为子偏移量指定子元素。

你可以在这样的CONTENTEDITABLE设置不同的元素：

<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>