Contenteditable 要素の最後にキャレットを移動するにはどうすればよいですか?

コンテンツ編集可能なエンティティの末尾にキャレットを移動する

Gmail のメモなどの特定の Web ウィジェットでは、カーソルを次の場所に移動する機能が必要です。 contenteditable 要素の終わり。入力を処理するためのソリューションは存在しますが、contenteditable 要素についてはその独特の性質により失敗します。

この課題に対処するには、contenteditable 要素専用に調整されたソリューションが必要です。幸いなことに、このニーズを満たす包括的な関数 setEndOfContenteditable() が存在します。この関数は、範囲と選択を適切に使用して contenteditable 要素のテキスト コンテンツを操作し、さまざまなブラウザとの互換性を確保します。

実装:

setEndOfContenteditable() 関数は動作します。さまざまなブラウザ間でバージョン:

• 最新のブラウザ (Firefox、Chrome、Opera、Safari、IE 9 ):
  createRange() メソッドを使用して、要素全体をカバーする非表示の範囲を作成しますコンテンツ。次に Collapse() が適用され、範囲の終点が要素の最後の文字に移動されます。最後に、範囲が現在の選択範囲に追加されます。
• IE 8 以下:
  createTextRange() メソッドを使用して、要素のコンテンツ全体をカバーする非表示の範囲を作成します。ここでも、collapse() メソッドを適用して、範囲の終点を要素の終点に配置します。最後に、範囲が選択され、新しい表示選択範囲になります。

使用法:

setEndOfContenteditable() 関数を使用するには、ターゲット要素を取得するだけです。

elem = document.getElementById('txt1'); // Element to move the caret to the end of
setEndOfContenteditable(elem);

この手法は、キャレットを効率的に末尾に移動します。 contenteditable 要素。ブラウザのバージョンや要素のコンテンツの長さに関係ありません。

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