Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mengekalkan Kedudukan Kursor dalam Kandungan Boleh Diedit `` Merentasi Pelayar?

Bagaimana untuk Mengekalkan Kedudukan Kursor dalam Kandungan Boleh Diedit `` Merentasi Pelayar?

Linda Hamiltonasal: 2024-11-10 14:54:03208semak imbas

How to Retain Cursor Position in a ContentEditable `` Across Browsers?

Tetapkan Kedudukan Kursor pada ContentEditable

Menetapkan kedudukan kursor dalam kandungan

boleh mencabar merentas pelbagai pelayar. Tingkah laku lalai biasanya meletakkan kursor pada permulaan teks, tanpa mengira kedudukan terakhir yang diketahui. Untuk mengatasi cabaran ini, penyelesaian yang disesuaikan diperlukan.

Penyelesaian Silang Penyemak Imbas

Untuk menangani isu ini, pertimbangkan penyelesaian berikut:

Simpan kedudukan kursor semasa apabila fokus hilang menggunakan fungsi saveSelection().
Tetapkan semula pemilihan apabila fokus diperoleh semula menggunakan fungsi restoreSelection().

function saveSelection() {
    if (window.getSelection) {
        savedRange = window.getSelection().getRangeAt(0);
    } else if (document.selection) { 
        savedRange = document.selection.createRange();  
    } 
}

function restoreSelection() {
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection) {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        } else if (document.createRange) {
            window.getSelection().addRange(savedRange);
        } else if (document.selection) {
            savedRange.select();
        }
    }
}

Klik Pengendalian Acara (Pilihan)

Secara lalai, mengklik dalam kandungan Boleh Diedit

akan mengalihkan kursor ke lokasi yang diklik. Jika anda lebih suka mengekalkan kedudukan kursor yang disimpan walaupun pada klik, batalkan acara onclick dan onmousedown menggunakan fungsi berikut:

function cancelEvent(e) {
    if (isInFocus == false &amp;&amp; savedRange != null) {
        if (e &amp;&amp; e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;
        }
        restoreSelection();
        return false;
    }
}

Penggunaan

Sertakan fungsi ini ke dalam kod anda dengan melampirkan saveSelection() pada acara onmouseup dan onkeyup bagi

, dan restoreSelection() kepada acara onfocus. Secara pilihan, lampirkan fungsi cancelEvent() pada acara onclick dan onmousedown untuk mengekalkan kedudukan kursor pada klik.

Penyelesaian ini menyediakan pendekatan menyeluruh dan merentas penyemak imbas untuk mengekalkan kedudukan kursor dalam kandungan Boleh diedit

elemen, meningkatkan pengalaman pengguna apabila bekerja dengan kawasan boleh diedit.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Kedudukan Kursor dalam Kandungan Boleh Diedit `` Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

if using Event function default this location position issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Adakah `.then(function(a){ return a; })` No-Op in Promises?Artikel seterusnya：Adakah `.then(function(a){ return a; })` No-Op in Promises?

Artikel berkaitan

Lihat lagi