首頁 > web前端 > js教程 > 如何確定使用者選擇在其父 HTML 元素內的開始和結束字元偏移量?

如何確定使用者選擇在其父 HTML 元素內的開始和結束字元偏移量?

Susan Sarandon
發布: 2024-11-18 02:44:02
原創
421 人瀏覽過

How Can I Determine the Start and End Character Offsets of a User Selection Within Its Parent HTML Element?

確定其父容器內範圍的開始和結束偏移量

問題

給定一個HTML 元素,如何確定字元偏移量在範圍(使用者選擇)開始和結束的父容器內,即使選擇跨越HTML

解決方案

更新的回應:

要取得開始與結束偏移:

function getSelectionCharacterOffsetWithin(element) {
  // Determine start and end offsets
  var start = 0;
  var end = 0;
  // Create ranges
  var range = getRangeAt(0);
  var preCaretRange = range.cloneRange();

  // Set start offset
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.startContainer, range.startOffset);
  start = preCaretRange.toString().length;

  // Set end offset
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  end = preCaretRange.toString().length;

  // Return the object
  return { start: start, end: end };
}
登入後複製

原始回覆:

提供的程式碼利用getSelection() 和getRangeAt(0) 來擷取選擇。然後,它使用範圍上的 toString() 方法計算元素內插入符號位置的偏移。此方法僅提供結束偏移或插入符位置。

範例:

function getRangeCharacterOffsetWithin(element) {
  var range, sel;
  if ((sel = window.getSelection())) {
    range = sel.getRangeAt(0);
    range.collapse(false);
    prevRange = range.cloneRange();
    prevRange.selectNodeContents(element);
    prevRange.setEnd(range.endContainer, range.endOffset);
    return prevRange.toString().length;
  }
  return 0;
}
登入後複製

以上是如何確定使用者選擇在其父 HTML 元素內的開始和結束字元偏移量?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板