ContentEditable Div でキャレット位置を正確に設定するにはどうすればよいですか?

contenteditable 要素内のキャレット位置の設定

contenteditable div 要素内の正確な位置にキャレットを設定することは、困難な作業となる場合があります。オンライン コミュニティに支援を求める場合、以下のような JavaScript ソリューションに遭遇したことがあるかもしれません:

const range = document.createRange();
const myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

ただし、Web のナレッジ リポジトリに存在するにもかかわらず、このアプローチは Firefox と Chrome の両方では効果がないことが証明されています。 .

範囲オブジェクトと選択オブジェクトを受け入れる

へ状況を修正するには、Range オブジェクトと Selection オブジェクトの可能性を解放することが重要です。これらのオブジェクトは、キャレットの配置を正確に制御するためのゲートキーパーとして機能します。

そのアプリケーションを説明するために、キャレットをテキストの 2 行目の 5 文字目に移動してみましょう。それを実現する方法は次のとおりです:

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

HTML 実装

このソリューションを完全に統合するには、コード内に次の HTML を組み込みます:

<div>

この実装では、ボタンをクリックすると、編集可能な div 内にキャレットが適切に配置され、配置は細心の注意を払って制御します。

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