Bagaimana untuk Menetapkan dan Mengekalkan Kedudukan Kursor dalam Div Boleh Diedit Kandungan?

Tetapkan Kedudukan Kursor pada contentEditable <div>

Apabila berurusan dengan contentEditable <div>, fungsi penyemak imbas lalai menetapkan semula kedudukan kursor ke permulaan teks apabila kembali fokus. Untuk menyelesaikan masalah ini, pertimbangkan penyelesaian berikut:

Simpan dan Pulihkan Kedudukan Kursor:

1. Simpan Kedudukan Semasa: Dalam onmouseup dan acara onkeyup, simpan kedudukan kursor semasa dalam pembolehubah, savedRange.
2. Kedudukan Pulihkan: Dalam acara onfocus, pulihkan pilihan yang disimpan daripada savedRange.

Pendekatan ini memastikan kursor diposisikan pada lokasi terakhir yang diketahui apabila div mendapatkan semula fokus.

Mengendalikan Klik:

Untuk memulihkan pilihan apabila mengklik div, perkara berikut langkah tambahan adalah perlu:

1. Batalkan Acara Klik: Lampirkan cancelEvent() pada acara onclick dan onmousedown. Fungsi ini menghalang kelakuan lalai acara ini dan memanggil restoreSelection().
2. Keadaan Fokus Jejak: Gunakan pembolehubah isInFocus untuk menentukan sama ada div berada dalam fokus. Hanya batalkan acara klik apabila div tidak berada dalam fokus.

Kod Kerja:

<div>

var savedRange, isInFocus;

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

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

  if (savedRange) {
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) {
      window.getSelection().addRange(savedRange);
    } else if (document.selection) {
      savedRange.select();
    }
  }
}

function onDivBlur() {
  isInFocus = false;
}

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

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