在內容可編輯元素中設置插入位置

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>