Question

当我得到一个选择范围，克隆它，然后清除作为选择来源的内容，为什么克隆的对象仍然受到影响？我认为这将是独立的（因为它被克隆）

以下是代码：https://plnkr.co/edit/A3TADtyyqkS6sI8ZJeaA?p=preview

<p id='test' contenteditable="true">hello world</p>

function test() {
    var r = document.getSelection().getRangeAt(0).cloneRange();
    console.log(r)
    $('p').empty();
    console.log(r);
}

$(function() {
    $('p').on('click', test)
})

--- --- EDIT

Mozilla api文档声明：返回的克隆是按值而不是引用复制的，因此Range中的更改不会影响另一个。

这可能只是jquery的empty（）方法的一个怪癖吗？

Answer 1

我搜索了一下google并找到了这个解决方案。如果您需要，请CHECK

function test() {
  var range = document.getSelection().getRangeAt(0);
  console.log(range)
  var clone = range.cloneRange();
  console.log(clone)
  range.collapse(true);
  var markerElement = document.createElement("span");
  markerElement.appendChild(document.createTextNode("\ufeff"));
  range.insertNode(markerElement);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(clone);
  setTimeout(function(){
   markerElement.parentNode.removeChild(markerElement);
  }, 250);
}

克隆范围不起作用

1 个答案: