クロスブラウザ環境でコンテンツの最後にキャレットを一貫して配置するにはどうすればよいですか?

コンテンツ末尾のキャレットの配置: クロスブラウザー ソリューション

Web 開発では、ユーザーがテキストを編集できるようにするには、キャレット (カーソル）が正しく表示されます。これは、ブラウザ間の互換性を扱う際に課題となります。

ブラウザ固有の動作

ブラウザが異なると、contenteditable の処理方法も異なります:

• Chrome: インサート
  改行の場合
• Firefox:
  を挿入します。
  を使用します。新しい行の場合
• IE:

  を挿入します。新しい段落の場合

末尾にキャレットを設定する

ブラウザに関係なく、一貫してテキストの末尾にキャレットを設定するには、次の関数を実装できます。 :

<pre class="brush:php;toolbar:false">el.focus();
if (typeof window.getSelection != "undefined"
        &amp;&amp; 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();
}

}


実装

この関数を使用するには、単に呼び出します編集可能な要素を作成した後にそれを実行します:

...

placeCaretAtEnd( document.querySelector('p') );

利点

このクロスブラウザー ソリューションは、一貫したユーザー フレンドリーなテキスト編集エクスペリエンスを提供し、カーソルが常に正しく配置されるようにします。本文の最後にあります。