Bagaimana untuk Mendapatkan Kembali Kedudukan Karet dalam Elemen Boleh Diedit Kandungan?

Dapatkan Kedudukan Karet dalam Elemen Boleh Diedit Kandungan

Mendapatkan kedudukan karet dalam elemen yang boleh diedit kandungan boleh menjadi satu cabaran, tetapi memahami teknik asas adalah penting untuk membina editor teks interaktif.

Untuk menentukan kedudukan karet, beberapa pendekatan wujud, setiap satu memenuhi pelayar yang berbeza keupayaan. Satu kaedah biasa melibatkan penggunaan objek Pemilihan dalam penyemak imbas moden seperti Firefox, Chrome dan Safari. Coretan kod berikut menunjukkan pendekatan ini:

function getCaretPosition(editableDiv) {
  var caretPos = 0;
  var sel = window.getSelection();
  if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    if (range.commonAncestorContainer.parentNode == editableDiv) {
      caretPos = range.endOffset;
    }
  }
  return caretPos;
}

Untuk penyemak imbas lama yang tidak menyokong objek Selection, kaedah document.selection.createRange boleh digunakan sebagai alternatif. Kod berikut menunjukkan pendekatan ini:

function getCaretPosition(editableDiv) {
  var caretPos = 0;
  if (document.selection && document.selection.createRange) {
    var range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

Setelah anda memperoleh kedudukan karet, anda boleh menggunakannya untuk melaksanakan pelbagai tugas, seperti:

• Paparkan kedudukan karet dalam elemen berasingan
• Lakukan operasi manipulasi teks pada kedudukan karet
• Laksanakan penyuntingan teks tersuai ciri

Ingat, penyemak imbas yang berbeza mungkin memerlukan teknik yang berbeza untuk menentukan kedudukan tanda dengan tepat, jadi memilih pendekatan yang sesuai adalah penting untuk keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Kembali Kedudukan Karet dalam Elemen Boleh Diedit Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!