我在 MS Edge 中注意到这个问题，插入符号的位置和范围在可编辑的内容中不匹配或错误。
$("#c").click(function(e) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
$("#res").get(0).textContent = "START_OFFSET:" + range.startOffset + "->" + range.startContainer.innerHTML;
console.log("Range count: " + sel.rangeCount);
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<div id="c" contenteditable="true">
<span>TEST</span>
</div>
<span id="res"></span>
</body>
</html>如果打开 MS Edge 很麻烦，这里是代码片段:
结果应该是 4 -> TEST
奇怪的是，实际的插入符指向包含 TEST 的 innerHTML 的跨度节点，但起始偏移量和结束偏移量显示为 1。根据范围数据，它是这样的 |TEST 但视觉上它是 TEST|。
有什么办法可以解决吗？
通过 JS，我似乎无法在范围类中捕获正确的信息来正确调整 startOffset 和 endOffset，除非我检测到点击位置附近最近的字母并在那里插入插入符号，但我相信它是乏味。
我找到了 this .是否有关于解决方案的后续行动？谢谢。
更新
span 元素干扰了范围。
$("#c").click(function(e) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
$("#res").get(0).textContent = "START_OFFSET:" + range.startOffset + "-> " + range.startContainer.innerHTML;
console.log(range.startContainer);
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<div id="c" contenteditable="true">
TEST
</div>
<span id="res"></span>
</body>
</html>最佳答案
我已经缩小了问题范围并且 <span>是万恶之源。
span s 文本包含在文本元素内，您正在其中导航( [Object Text] ，检查 startContainer 属性)。在最后一个字符之后，文本元素结束，span然而并没有。所以你现在在文本元素(索引 0)之后并且在 span 中的第一个索引处。 .其他主要浏览器没有这个问题，因为文本元素在最后一个字符之后继续。这很可能是 Edge 错误。
删除 span解决问题。
关于javascript - 范围和插入符位置不匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46815472/