Bagaimana untuk Secara Konsisten Meletakkan Karet di Penghujung Kandungan dalam Persekitaran Merentas Pelayar?

Penempatan Caret di Akhir Kandungan: Penyelesaian Silang Penyemak Imbas

Dalam pembangunan web, membenarkan pengguna mengedit teks memerlukan memastikan karet ( kursor) dipaparkan dengan betul. Ini menimbulkan cabaran apabila berurusan dengan keserasian merentas penyemak imbas.

Gelagat Khusus Penyemak Imbas

Pelayar yang berbeza mengendalikan kandungan yang boleh diedit secara berbeza:

• Chrome: Sisipan
  untuk pemutusan baris
• Firefox: Sisipan
  dan menggunakan
  untuk baris baharu
• IE: Sisipan

  untuk perenggan baharu

Menetapkan Karet di Akhir

Untuk menetapkan karet secara konsisten pada penghujung teks, tanpa mengira pelayar, anda boleh melaksanakan fungsi berikut :

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

}

Pelaksanaan

Untuk menggunakan fungsi ini, hanya panggilnya selepas anda mencipta elemen yang boleh diedit:

...

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

Faedah

Penyelesaian silang pelayar ini menyediakan pengalaman yang konsisten dan mesra pengguna untuk pengeditan teks, memastikan kursor sentiasa diposisikan dengan betul pada penghujung teks.

Atas ialah kandungan terperinci Bagaimana untuk Secara Konsisten Meletakkan Karet di Penghujung Kandungan dalam Persekitaran Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!