Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mendapatkan Offset Mula dan Tamat Pemilihan Teks Dalam Elemen Bekas?

Bagaimana untuk Mendapatkan Offset Mula dan Tamat Pemilihan Teks Dalam Elemen Bekas?

DDD
DDDasal
2024-11-17 16:38:01355semak imbas

How to Get the Start and End Offsets of a Text Selection Within a Container Element?

Dapatkan Kedudukan Permulaan dan Penamat Pemilihan Teks Berkaitan dengan Bekasnya

Masalah:

Pertimbangkan perkara berikut HTML:

<div>

Andaikan pengguna memilih teks "rumah" daripada elemen ini. Bagaimanakah kita boleh menentukan offset mula dan tamat pilihan ini berbanding bekas #induk?

Jawapan:

Harta julat.startOffset nampaknya menyediakan kefungsian yang diingini , tetapi ia mewakili offset hanya dalam bekas terdekat. Selain itu, ia hanya mewakili pengimbangan aksara jika bekas itu ialah nod teks.

Kod Kemas Kini:

Berikut ialah versi kod yang dikemas kini yang mengembalikan kedua-dua permulaan dengan betul dan offset tamat:

function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.startContainer, range.startOffset);
      start = preCaretRange.toString().length;
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      end = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToStart", textRange);
    start = preCaretTextRange.text.length;
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    end = preCaretTextRange.text.length;
  }
  return { start: start, end: end };
}

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Offset Mula dan Tamat Pemilihan Teks Dalam Elemen Bekas?. 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