Question

我在MS Edge中发现了这个问题，插入符号位置和范围在内容可编辑内不匹配或错误。

＆＃13;

$("#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);
});

＆＃13;

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

＆＃13;

如果打开MS Edge很麻烦，请点击这里：

结果应为4 - ＆gt; TEST

奇怪的是，实际的插入符号指向包含TEST的innerHTML的span节点，但是起始偏移量和结束偏移量显示为1.通过范围数据，它就像这个|TEST但在视觉上它是{ {1}}。

有没有办法解决这个问题？

通过JS，我似乎无法在范围类中捕获正确的信息来正确调整startOffset和endOffset，除非我在点击位置附近检测到最近的字母并插入插入符号，但是我相信它很乏味。

我找到了this。关于解决方案有任何后续行动吗？感谢。

更新

TEST|元素正在干扰范围。

＆＃13;

span

＆＃13;

$("#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);
});

＆＃13;

Answer 1

我已经缩小了问题，<span>是所有邪恶的根源。

span文本包含在文本元素中，您在其中导航（[Object Text]，检查startContainer属性）。在最后一个char之后，text元素结束，span却没有。所以你现在在文本元素（索引0）和span的第一个索引之后。其他主流浏览器没有此问题，因为文本元素在最后一个字符后继续。这很可能是Edge bug。

删除span以解决问题。

范围和插入位置不匹配

1 个答案: