コンテナ要素内のテキスト選択の開始オフセットと終了オフセットを取得するにはどうすればよいですか?

コンテナを基準としたテキスト選択の開始位置と終了位置を取得する

問題:

次の HTML を考えてみましょう:

<div>

ユーザーがこの要素からテキスト「home」を選択したとします。 #parent コンテナを基準としたこの選択範囲の開始オフセットと終了オフセットを決定するにはどうすればよいですか?

答え:

range.startOffset プロパティは、必要な機能を提供するようです。ですが、これは直接のコンテナ内のオフセットのみを表します。さらに、コンテナがテキスト ノードの場合、文字オフセットのみを表します。

更新されたコード:

これは、開始と開始の両方を正しく返すコードの更新バージョンです。および終了オフセット:

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

以上がコンテナ要素内のテキスト選択の開始オフセットと終了オフセットを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。