Bagaimana untuk Mengekalkan Kedudukan Kursor dalam Kandungan Boleh Diedit `` Merentasi Pelayar?-tutorial js-php.cn

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

Salin selepas log masuk

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

Salin selepas log masuk

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!

Artikel sebelumnya：Adakah `.then(function(a){ return a; })` No-Op in Promises? Artikel seterusnya：Bagaimana Anda Boleh Lumpuhkan Pautan HTML dalam Pelayar Moden?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2843

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2968

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2484

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...