Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menghalang Kursor daripada Menetapkan Semula kepada Permulaan Kandungan Boleh Diedit ``?

Bagaimana untuk Menghalang Kursor daripada Menetapkan Semula kepada Permulaan Kandungan Boleh Diedit ``?

Barbara Streisandasal: 2024-11-10 16:07:021080semak imbas

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

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

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

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!

if Event function this 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：Bagaimanakah anda mengendalikan pengambilan data tak segerak dalam gelung dan memastikan semua pertanyaan selesai sebelum mengembalikan set data yang padu?Artikel seterusnya：Bagaimanakah anda mengendalikan pengambilan data tak segerak dalam gelung dan memastikan semua pertanyaan selesai sebelum mengembalikan set data yang padu?

Artikel berkaitan

Lihat lagi