ブラウザ間で一貫して「contenteditable」Pre要素のテキストの末尾にキャレットを配置する方法

クロスブラウザでテキストの末尾にキャレットを設定する

HTML では、

contenteditable

要素を使用すると、ユーザーは要素内でテキストを直接編集できます。ただし、改行の処理方法にはブラウザ間で不一致が発生する可能性があります。

ブラウザ間での改行の違い

<p></p>

contenteditable

の出力要素はブラウザによって異なります。Chrome では

<div> が配置されます。改行内に、Firefox は <pre class="brush:php;toolbar:false"><br>

を挿入し、Internet Explorer は

<p></p>

を追加します。

設定テキストの末尾にキャレット

すべてのテキストの末尾にキャレットを一貫して配置するにはブラウザでは、次の 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();
    }
}

使用例

この関数を利用するには、ボタンにイベント リスナーをアタッチし、クリックされるとその関数を呼び出してキャレットを配置します。テキストの終わり:

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