Bagaimana untuk Meletakkan Karet di Hujung Teks dalam Pra Elemen `contenteditable` Secara Konsisten Merentasi Pelayar?

<p>

Menetapkan Karet di Hujung Pelayar Silang Teks

<p>Dalam HTML,

contenteditable

elemen membenarkan pengguna mengedit teks secara langsung dalam elemen. Walau bagaimanapun, mungkin terdapat ketidakkonsistenan silang penyemak imbas dalam cara pemisah baris dikendalikan.

Perbezaan Pecah Talian Penyemak Imbas

<p>Keluaran

contenteditable

elemen berbeza-beza merentas pelayar: Chrome meletakkan

<div>

dalam pemisah baris, Firefox memasukkan

<br />

dan Internet Explorer menambah

<p>

.

Tetapan Karet di Akhir Teks

<p>Untuk meletakkan karet secara konsisten di hujung teks dalam semua penyemak imbas, gunakan fungsi JavaScript berikut:

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

Contoh Penggunaan

<p>Untuk menggunakan fungsi ini, lampirkan pendengar acara pada butang yang, apabila diklik, memanggil fungsi untuk meletakkan karet di hujung daripada teks:

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

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Karet di Hujung Teks dalam Pra Elemen `contenteditable` Secara Konsisten Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!