Contenteditable Div でキャレットの位置を正確に制御するにはどうすればよいですか?

Contenteditable 要素内のキャレットの位置

Contenteditable div 内のキャレットの位置を操作しようとして、Range とさまざまな程度の成功を伴う選択オブジェクト。しかし、最近の取り組みにより、カーソルの位置を設定するための正確な方法が明らかになりました。

キャレットを特定の文字に設定する

Firefox や Chrome などのブラウザでは、望ましい結果が得られます。これは、次のコードを利用して実現します:

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

このコードでは、カーソルは 5 番目に位置します。 contenteditable div 内のテキストの 2 行目の文字 (ID は「editable」)。これは、範囲の開始点と終了点の両方について、ターゲット ノード (el.childNodes[2]) とそのノード内のオフセット位置 (5) を指定することによって実現されます。

位置の調整

精度を最大限に高めるために、追加のノードとオフセットをコードに含めて、カーソルの位置をネストされた要素内またはネストされた要素内の特定の文字に絞り込むことができます。特定の単語。このレベルの制御により、複雑な HTML 構造内でのシームレスなカーソル操作が可能になります。

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