ブラウザ間で Contenteditable 要素のテキストの末尾にキャレットを配置する方法

クロスブラウザーでのテキスト末尾のキャレット位置の設定

はじめに

改行の挿入とテキスト末尾のキャレット位置の設定はブラウザーによって異なる場合があります。この記事では、ボタンがクリックされたときにテキストの最後にキャレットを設定するためのクロスブラウザーの解決策について説明します。

問題

Chrome、 などのさまざまなブラウザーでFirefox と IE では、contenteditable 要素内でテキストを保存および表示する方法が異なります。これにより、望ましくない改行や書式設定が行われる可能性があります。

さらに、ボタンをクリックした後にテキストの最後にキャレットの位置を設定するには、ブラウザ間で一貫したアプローチが必要です。

解決策

次の JavaScript 関数は、テキストの末尾にキャレットを配置するためのクロスブラウザー ソリューションを提供します。

function placeCaretAtEnd(el) {
  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

この関数は、入力として contenteditable 要素 (el) への参照を受け取ります。最新のブラウザに存在する getSelection メソッドと createRange メソッドをチェックします。使用可能な場合、範囲を作成し、要素のコンテンツ全体を選択し、範囲を最後まで折りたたんで、選択範囲を設定します。

これらのメソッドがない従来のブラウザの場合、関数は createTextRange メソッドを使用してこれを実現します。同じ効果です。

この関数を使用するには、ボタンがクリックされたときに次のように呼び出す必要があります。

$(document).ready(function() {
  $('#insert_caret').click(function() {
    var ele = $('#content');
    placeCaretAtEnd(ele);
  });
});

以上がブラウザ間で Contenteditable 要素のテキストの末尾にキャレットを配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。