Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Mendapatkan Kedudukan Karet dalam Elemen Boleh Diedit Kandungan?

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

Susan Sarandon
Susan Sarandonasal
2024-11-25 07:10:12335semak imbas

How Can I Get the Caret Position in a ContentEditable Element?

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!

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