ContentEditable 要素のキャレット位置をプログラムで設定するにはどうすればよいですか?

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

コンテンツ編集可能な div でのキャレット位置の設定は、Range オブジェクトと Selection オブジェクトを使用して実現できます。要素内の特定の位置にキャレットを設定する方法は次のとおりです。

コード:

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

説明:

• el は contenteditable 要素を表します。
• range は、キャレット位置の指定に使用される Range オブジェクトです。
• sel は選択を操作するために使用される選択オブジェクト。
• setStart() は、範囲の開始点を指定されたノードとオフセット (それぞれ el.childNodes[2] と 5) に設定します。
• collapse( ) 範囲を開始位置の単一点に折りたたみます。
• removeAllRanges() は既存のものを削除します。
• addRange() は、作成した範囲を選択範囲に追加します。

例:

次の HTML を考えてみましょう:

<div><p> 「フォーカス」ボタンをクリックすると、JavaScript 関数 setCaret() が呼び出され、キャレットが文字列の 5 文字目に配置されます。テキストの 2 行目。</p></div>

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