ホームページ >ウェブフロントエンド >jsチュートリアル >ブラウザ間で一貫して「contenteditable」Pre要素のテキストの末尾にキャレットを配置する方法

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-23 02:31:10872ブラウズ
<p>How to Place the Caret at the End of Text in a `contenteditable` Pre Element Consistently Across Browsers?

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

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

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

<p>
contenteditable
の出力要素はブラウザによって異なります。Chrome では
<div>
が配置されます。改行内に、Firefox は
<br />
を挿入し、Internet Explorer は
<p>
を追加します。

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

<p>すべてのテキストの末尾にキャレットを一貫して配置するにはブラウザでは、次の JavaScript 関数を使用します。

function placeCaretAtEnd(el) {
    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();
    }
}

使用例

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。