Question

在contenteditable span中更改html之后，我试图重置光标位置。为此，我克隆当前范围，然后设置html，然后清除范围，然后添加范围并最终折叠。但是，当我更改html时，将重置克隆范围！这使我相信克隆的范围实际上不是深拷贝，因为否则，为什么更改html会影响它呢？我认为我可以手动复制所有属性，但这听起来很痛苦。无论如何，复制范围的正确方法是什么？

$("#myText").on("input", function() {
  var temp = window.getSelection().getRangeAt(0).cloneRange();
  console.log(temp);
  $("#myText").html($("#myText").html());
  //clear current range
  console.log(temp);
  window.getSelection().removeAllRanges();
  //add the range
  window.getSelection().addRange(temp);
  //now move the carret to there
  window.getSelection().collapseToEnd();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="myText" spellcheck="false" contenteditable="true">Hello!</span>

（或在jsfiddle上）

Answer 1

执行此行时：

$("#myText").html($("#myText").html());

您触发页面以解析该输入并创建新的子节点。克隆范围时，它仍然指向旧节点，这些旧节点将被删除，因此原始范围和克隆范围都会重置

Range.cloneRange（）实际上不会克隆范围吗？

1 个答案: