ContentEditable 要素のキャレット位置を取得するにはどうすればよいですか?

ContentEditable のキャレット位置の取得

contentEditable 要素内の現在のキャレットの位置を決定することは、さまざまな編集タスクに不可欠です。キャレット位置の設定とは異なり、現在の位置を取得するには、より複雑なアプローチが必要です。

提供されたコード スニペットは、contentEditable div 内に囲まれた単一のテキスト ノードを持つ単純なシナリオを想定しています。 div の CSS ホワイトスペース プロパティが pre に設定されている場合、より洗練されたアプローチが必要です。

実装

関数 getCaretPosition は、依存するさまざまな手法を使用してキャレットの位置を取得します。ブラウザ上:

• をサポートする最新のブラウザの場合window.getSelection() では、範囲の終了オフセットを利用してキャレット位置が決定されます。
• document.selection を使用するレガシー ブラウザの場合、キャレット位置を計算するために補助要素が挿入されます。

使用法

提供された HTML および JavaScript コード例内では、更新関数は常に更新されます。 #caretposition div に表示されるキャレットの位置を更新します。マウス イベント (mousedown、mouseup) とキーボード イベント (keydown、keyup) をリッスンすることにより、ユーザーが contentEditable 要素を操作するときにキャレットの位置がリアルタイムでキャプチャおよび表示され、現在のカーソルの位置を正確に把握できます。

追加の考慮事項

編集可能なコンテンツに要素がネストされている状況が発生した場合は、別の方法を参照してください。より包括的なアプローチについては、リンクされた回答で説明されています。このソリューションは、複雑なコンテンツのシナリオをより効果的に処理します。

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