Bagaimana untuk Menghalang Kursor daripada Menetapkan Semula kepada Permulaan Kandungan Boleh Diedit ``?-tutorial js-php.cn

How to Prevent the Cursor from Resetting to the Beginning of a ContentEditable ``?

Tetapkan Kedudukan Kursor pada ContentEditable

Apabila bekerja dengan contentEditable='on'

, adalah perkara biasa untuk menghadapi isu kursor menetapkan semula ke permulaan teks selepas mendapat semula fokus. Untuk menangani perkara ini, penyelesaian silang penyemak imbas telah muncul.

Penyelesaian:

1. Simpan Kedudukan Kursor:

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

Salin selepas log masuk

Fungsi ini melekat pada acara onmouseup dan onkeyup bagi

dan menyimpan pilihan semasa ke pembolehubah savedRange.

2. Pulihkan Kedudukan Kursor:

function restoreSelection() {
  if (savedRange != null) {
    if (window.getSelection) { // non-IE
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) { // non-IE
      window.getSelection().addRange(savedRange);
    } else if (document.selection) { // IE
      savedRange.select();
    }
  }
}

Salin selepas log masuk

Fungsi ini melekat pada acara onfocus

dan memulihkan pilihan yang disimpan dalam savedRange.

3. Cegah Peristiwa Klik (Pilihan):

Jika anda mahu kursor dipulihkan pada klik dan bukannya menetapkan semula kepada permulaan, anda boleh menggunakan fungsi berikut:

var isInFocus = false;

function onDivBlur() {
  isInFocus = false;
}

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

Salin selepas log masuk

Ini fungsi dilampirkan pada acara onblur, onclick, dan onmousedown dan menghalang acara klik daripada menetapkan semula kedudukan kursor. Mereka juga memulihkan pemilihan, memastikan kursor diletakkan di tempat ia berhenti.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Kursor daripada Menetapkan Semula kepada Permulaan Kandungan Boleh Diedit ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah anda mengendalikan pengambilan data tak segerak dalam gelung dan memastikan semua pertanyaan selesai sebelum mengembalikan set data yang padu? Artikel seterusnya：Mencipta platform SaaS (Perisian sebagai Perkhidmatan) menggunakan tindanan MERN

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

1894

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

2057

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

1729

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