2

我尝试了很多不同的东西，但不知所措。下面的代码说明了这个问题。我有一个可编辑的元素。

如果我选择一段文本，则 Selection.anchorNode 是一个#text 节点。

如果在选择段落时我在该段落之前包含一个回车符，则 Selection.anchorNode 是包含 span 元素。

我需要知道的是从 span 元素的 innerText 值开始的偏移量是多少。When a carriage return IS NOT included in the selection, I am able simply to analyze the sibling nodes of the anchorNode. But when a carriage return IS included in the selection, I don't seem to have the information to achieve this.

任何关于我所缺少的指导将不胜感激。

function showResult() {
  let sel = document.getSelection();
  document.getElementById("output").textContent ="document.getSelection().anchorNode.nodeName: " +  sel.anchorNode.nodeName;
}
document.getElementById("textContainer").innerText = "This is the first paragraph\n\nSelecting this paragraph with and without the preceding carriage return yields very different anchorNodes";
#textContainer {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 100px;
  border: 1px solid steelblue;
  margin: 5px;
}

#output {
  position: relative;
  width: 400px;
  height: 100px;
  border: 1px solid steelblue;
  margin: 5px;
}
<div>
    <span id="textContainer" contenteditable="true"></span>
</div>
<input  type="button" onclick="showResult()" value="Write selection object to console" />
<div id="output">
</div>

4

1 回答 1

2

似乎浏览器在选择回车时返回父节点，因此您可以if在这种情况下使用条件：

sel.anchorNode.hasChildNodes()?sel.anchorNode.childNodes[0].nodeName:sel.anchorNode.nodeName


function showResult() {
  let sel = document.getSelection();
  document.getElementById("output").textContent ="document.getSelection().anchorNode.nodeName: " +  (sel.anchorNode.hasChildNodes()?sel.anchorNode.childNodes[0].nodeName:sel.anchorNode.nodeName);
}
document.getElementById("textContainer").innerText = "This is the first paragraph\n\nSelecting this paragraph with and without the preceding carriage return yields very different anchorNodes";
#textContainer {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 100px;
  border: 1px solid steelblue;
  margin: 5px;
}

#output {
  position: relative;
  width: 400px;
  height: 100px;
  border: 1px solid steelblue;
  margin: 5px;
}
<div>
    <span id="textContainer" contenteditable="true"></span>
</div>
<input  type="button" onclick="showResult()" value="Write selection object to console" />
<div id="output">
</div>

于 2021-10-30T08:03:37.957 回答