Contenteditable 要素にプログラムでキャレットを配置するにはどうすればよいですか?

Contenteditable 要素の特定の位置にキャレットを配置する

contenteditable 要素を扱う場合、カーソル (キャレット) を設定する機能特定の位置に移動することが重要になる場合があります。ただし、これを達成するのは簡単ではない可能性があります。

ほとんどの Web ブラウザでは、Range オブジェクトと Selection オブジェクトを利用することが重要です。各選択境界をノードとして指定し、そのノード内のオフセットを指定することで、キャレットの配置を制御できます。

説明のために、contenteditable div を使用した簡単な HTML の例を考えてみましょう。

<div>
<p>ここで、テキストの 2 行目の 5 文字目にキャレットを配置するとします。これを実現するには、次の手順に従います:</p>
<ol>
<li>
<p><strong>範囲オブジェクトを作成します:</strong></p>
<pre class="brush:php;toolbar:false">var range = document.createRange();

Setセレクション境界:

var myDiv = document.getElementById("editable");
range.setStart(myDiv.childNodes[2], 5);
range.collapse(true);

• myDiv.childNodes[2] はテキストの 2 行目を参照します。
• range.setStart() は選択範囲の開始をそのノード内の 5 番目の文字。
• range.collapse(true) は範囲をキャレットに折りたたみます。 Position.

選択範囲を設定します:

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

• window.getSelection() は、Selection オブジェクトを返します。
• sel.removeAllRanges() は既存のものを削除しますselected.
• sel.addRange(range) は、新しい選択範囲を設定します。

関数をトリガーします:
上記のコードをクリックイベントに追加します。 button:

document.getElementById("button").addEventListener("click", setCaret);

次の手順に従うことで、contenteditable 要素内のキャレットの位置をプログラムで設定できるようになります。