我在 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 的 span 节点，但起始偏移量和结束偏移量显示为 1。通过范围数据，它是这样的|TEST但视觉上它是TEST|.
有办法解决这个问题吗？
通过JS，我似乎无法捕获范围类内的正确信息来正确调整startOffset和endOffset，除非我检测到点击位置附近最近的字母并在那里插入插入符号，但我认为这很乏味。
I found this https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3296786/。关于解决方案有后续吗？谢谢。
Update
The 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>是万恶之源。
The spans 文本包含在文本元素内，您正在其中导航 ([Object Text]， 检查startContainer财产）。在最后一个字符之后，文本元素结束，span然而没有。因此，您现在位于文本元素（索引 0）之后，并且位于文本元素中的第一个索引处。span。其他主要浏览器没有这个问题，因为文本元素在最后一个字符之后继续。这很可能是 Edge 错误。
去除span来解决问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
