javascript - 将元素插入范围会清除 Chrome 中的选择

Question

我正在尝试在选择的开头插入一个标记（我用来在选择的顶部放置一个元素）。

我在 Chrome 中遇到了一个奇怪的情况，当range.insertNode执行该行时，选择被清除：

$(document).on('mouseup', function (e) {
  var range = window.getSelection().getRangeAt(0).cloneRange();
  range.collapse(true);
  var markerElement = document.createElement("span");
  markerElement.appendChild(document.createTextNode("\ufeff"));
  // this will sometimes make the selection disappear in Chrome
  range.insertNode(markerElement);
  // make sure the marker is removed
  setTimeout(function(){
   markerElement.parentNode.removeChild(markerElement);
  }, 250);
});

这是一个jsbin可以用来尝试的示例：http: //jsbin.com/agojib/1/edit

如果您选择一个字母，它将清除选择。任何其他选择都可以。

注意：我正在使用如何将元素放置在用户文本选择旁边？

Answer 1

好的，我想我明白了：http: //jsbin.com/agojib/7/edit

$(document).on('mouseup', function (e) {
  var range = window.getSelection().getRangeAt(0);
  // clone the current range
  var clone = range.cloneRange();
  range.collapse(true);
  var markerElement = document.createElement("span");
  markerElement.appendChild(document.createTextNode("\ufeff"));
  // insert the marker in the first range
  range.insertNode(markerElement);
  // retrieve the selection
  var selection = window.getSelection();
  // remove all the ranges
  selection.removeAllRanges();
  // add the previously cloned range
  selection.addRange(clone);
  // make sure the marker is removed
  setTimeout(function(){
   markerElement.parentNode.removeChild(markerElement);
  }, 250);
});

解决方案基本上是克隆范围，在第一个范围内插入标记并使用克隆的范围重新选择以前选择的文本。