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

<p>

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

<p>HTML では、

contenteditable

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

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

<p>

contenteditable

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

<div>

が配置されます。改行内に、Firefox は

<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();
    }
}

使用例

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

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

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