Bagaimana untuk Menentukan Offset Aksara Dengan Tepat Dalam Elemen HTML?

Mengira Julat Mula dan Tamat Offset Berbanding dengan Bekas Induk

Andaikan anda menemui elemen HTML seperti di bawah:

<div>

Dan pengguna memilih teks "rumah" dengan tetikus mereka. Menentukan offset aksara dalam elemen "#parent" ialah tugas biasa, terutamanya apabila memilih teg HTML.

Walaupun sifat "range.startOffset" memberikan offset relatif kepada bekas segera, ia terhad kepada offset aksara apabila bekas adalah nod teks. Untuk mengatasi had ini, kami membentangkan penyelesaian yang dikemas kini:

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 };
}

Untuk menunjukkan kaedah yang dikemas kini, kami memulakan pendengar acara untuk menangkap perubahan pemilihan dan mengemas kini elemen log pada halaman:

function reportSelection() {
  var selOffsets = getSelectionCharacterOffsetWithin(
    document.getElementById("editor")
  );
  document.getElementById("selectionLog").innerHTML =
    "Selection offsets: " + selOffsets.start + ", " + selOffsets.end;
}

window.onload = function () {
  document.addEventListener("selectionchange", reportSelection, false);
  document.addEventListener("mouseup", reportSelection, false);
  document.addEventListener("mousedown", reportSelection, false);
  document.addEventListener("keyup", reportSelection, false);
};

Kod ini membolehkan anda menentukan dengan tepat offset aksara pilihan pengguna dalam elemen HTML, walaupun semasa memilih teg HTML.

Atas ialah kandungan terperinci Bagaimana untuk Menentukan Offset Aksara Dengan Tepat Dalam Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!