Contenteditable 要素でキャレット位置を設定するにはどうすればよいですか?

Contenteditable 要素でキャレットの位置を設定する

Web 開発では、キャレット (カーソル) の位置を制御したい状況に遭遇することがあります。テキスト エディターやメッセージ入力フィールドなどの contenteditable 要素内。これにより、正確な編集や特定の場所へのカーソルの配置が可能になります。

これを実現するには、JavaScript で Range オブジェクトと Selection オブジェクトを利用します。以下に、キャレット位置を設定する方法を示す例を示します。

function setCaret() {
    var el = document.getElementById("editable");
    var range = document.createRange();
    var sel = window.getSelection();

    // Set the start position of the range at the beginning of the fifth character of the third line
    range.setStart(el.childNodes[2], 5);

    // Collapse the range to the start point
    range.collapse(true);

    // Set the selection to start at the start position of the range
    sel.removeAllRanges();
    sel.addRange(range);
}

この例では、

が存在すると仮定します。 ID が「editable」の要素を追加し、contenteditable にします。ボタンをクリックすると、setCaret 関数によって、contenteditable div 要素内のテキストの 3 行目の 5 文字目にキャレットが移動します。

キャレットの位置の正確な実装は、ブラウザーによって若干異なる場合があることに注意してください。ただし、ここで説明する一般的なアプローチは広くサポートされています。

以上がContenteditable 要素でキャレット位置を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。