コンテンツ編集可能要素のキャレット位置を設定する

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置き換える（エルを、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の開始点の間の子ノードの数です。

テキストエリアでない場合は、オフセットの子要素が表示されます。

次のようなの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>