Bagaimanakah Saya Boleh Mendapatkan Kedudukan Karet dalam Elemen Boleh Diedit Kandungan?

Mengambil semula Kedudukan Karet dalam Elemen Boleh Diedit Kandungan

Berbeza dengan banyaknya penyelesaian untuk menetapkan kedudukan karet dalam kandungan Elemen yang boleh diedit, menentukannya kedudukan semasa telah terbukti sukar difahami oleh banyak pemaju. Soalan ini menangani jurang pengetahuan khusus ini.

Untuk memastikan kedudukan karet dalam kandungan tertentu Elemen yang boleh diedit semasa input pengguna, seperti penekanan kekunci, seseorang boleh menggunakan kod berikut:

function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    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;
}

Kod ini beroperasi di bawah andaian berikut:

• Div boleh edit mengandungi satu nod teks tanpa tambahan bersarang elemen.
• Sifat ruang putih CSS untuk div boleh edit tidak ditetapkan kepada "pra".

Untuk penyelesaian yang lebih komprehensif yang menampung kandungan yang lebih kompleks dengan elemen bersarang, rujuk kepada jawapan Stack Overflow berikut: https://stackoverflow.com/a/4812022/96100

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