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

Contenteditable 要素でのキャレットの配置: 総合ガイド

contenteditable 要素の末尾にカーソルを移動するのは、難しい作業になる場合があります。従来の入力要素とは異なり、contenteditable エンティティには、デフォルトでカーソルを最後にフォーカスするという固有の特性がありません。

Geowa4 の提案: 機能が制限されています

Geowa4 が提供するソリューションテキストエリアには効果的かもしれませんが、contenteditable 要素の特定の要件には対応していません。キャレットをこのような要素の最後に効果的に移動するには、カスタマイズされたアプローチが必要です。

提案されたソリューション: ブラウザ間の互換性

以下のコード スニペットは、堅牢な機能を提供します。 contenteditable 要素をサポートするすべての主要ブラウザ間でシームレスに動作するソリューションです。このアプローチでは、Range API の機能を活用して、カーソル位置をインテリジェントに選択および操作します。

function setEndOfContenteditable(contentEditableElement) {
  var range, selection;
  if (document.createRange) { // Firefox, Chrome, Opera, Safari, IE 9+
    range = document.createRange(); // Create a range (a range is like the selection but invisible)
    range.selectNodeContents(contentEditableElement); // Select the entire contents of the element with the range
    range.collapse(false); // Collapse the range to the end point. False means collapse to end rather than the start
    selection = window.getSelection(); // Get the selection object (allows you to change selection)
    selection.removeAllRanges(); // Remove any selections already made
    selection.addRange(range); // Make the range you have just created the visible selection
  } else if (document.selection) { // IE 8 and lower
    range = document.body.createTextRange(); // Create a range (a range is a like the selection but invisible)
    range.moveToElementText(contentEditableElement); // Select the entire contents of the element with the range
    range.collapse(false); // Collapse the range to the end point. False means collapse to end rather than the start
    range.select(); // Select the range (make it the visible selection)
  }
}

使用例:

キャレットを簡単に最後まで移動するにはcontenteditable 要素の場合は、必要な要素を引数として setEndOfContenteditable() 関数を呼び出すだけです。

elem = document.getElementById('txt1'); // This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);

このソリューションは、contenteditable 要素内のカーソル位置を操作するための包括的で信頼性の高い方法を提供し、コンテンツ編集可能要素間で一貫した動作を保証します。すべての主要なブラウザ。

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