Caret-Position in einem editierbaren Element festlegen

Question

Ich möchte Caret-Position in einem editierbaren Element festlegen, aber es scheint nicht zu funktionieren.

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

Try this:
Nur range.setStart ersetzen (el, 2) mit 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>

Sie übergeben den falschen Knoten an den setStart f Salbung. Sie müssen einen Textknoten übergeben.

Answer 2

Wenn der startNode ein Knoten vom Typ Text, Kommentar oder CDATASection ist, dann ist startOffset die Anzahl der Zeichen ab dem Start von startNode. Bei anderen Knotentypen ist startOffset die Anzahl der untergeordneten Knoten zwischen dem Start von startNode.

Wenn es nicht textarea ist, gibt es die untergeordneten Elemente für Offsets.

Sie können verschiedene Elemente in der contenteditable wie folgt festgelegt:

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