document.getSelection 在选择中带有回车

Question

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

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

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

我需要知道的是从 span 元素的 innerText 值开始的偏移量是多少。 当返回返回不包括在选择中时，我能够简单地分析anchornode的兄弟节点。 但是，当在选择中包含回程返回时，我似乎没有这些信息来实现这一目标。

任何关于我遗漏的指导将不胜感激。

 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>

Answer 1

似乎浏览器在选择回车时返回父节点，因此您可以在这种情况下使用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>