Bagaimana Mengekalkan Kedudukan Kursor dalam Div Boleh Disunting Kandungan Selepas Fokus?

Menetapkan Kedudukan Kursor pada Kandungan Boleh Diedit <div>

Masalah:

Kandungan boleh diedit <div> elemen cenderung untuk menetapkan semula kedudukan kursor ke permulaan teks setiap kali fokus diperoleh semula. Ini boleh menjadi tidak diingini apabila kursor perlu dipulihkan ke kedudukan sebelumnya.

Penyelesaian:

Untuk menangani isu ini, penyelesaian silang penyemak imbas berikut boleh digunakan:

Langkah 1: Simpan Pilihan

Lampirkan pendengar acara (onmouseup dan onkeyup) pada <div> untuk menangkap kedudukan kursor semasa (savedRange) apabila butang tetikus dilepaskan atau kekunci dilepaskan.

Langkah 2: Pulihkan Pilihan

Langkah 2 ( a): On Focus

Lampirkan pendengar acara (onfocus) pada <div> yang memulihkan pilihan yang disimpan sebelum ini.

Langkah 2 (b): Pada Klik (Pilihan)

Untuk mengekalkan pilihan pada klik, langkah tambahan diperlukan:

• Daftar pendengar acara onclick dan onmousedown yang membatalkan acara klik (cancelEvent()).
• Inside cancelEvent(), pulihkan pilihan yang disimpan dan tetapkan isInFocus kepada benar.
• Pada kabur (onblur), tetapkan isInFocus kepada palsu.

Kod Lengkap (Termasuk Pemulihan Pilihan pada Klik):

<div>

var savedRange, isInFocus;

function saveSelection() {
  // ... (Selection saving logic as described in Step 1)
}

function restoreSelection() {
  isInFocus = true;
  document.getElementById("area").focus();

  if (savedRange != null) {
    // ... (Selection restoration logic as described in Step 2)
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange != null) {
    // ... (Event cancellation logic as described in Step 2 (b))
  }
}

Atas ialah kandungan terperinci Bagaimana Mengekalkan Kedudukan Kursor dalam Div Boleh Disunting Kandungan Selepas Fokus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!