在Chrome中插入一个元素到一个范围将清除所选内容

Inserting an element into a range clears the selection in Chrome

本文关键字：一个 清除 范围 Chrome 元素 插入      更新时间：2023-09-26

我试图在选择的开始插入一个标记(我用来将元素定位在选择的顶部)。

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

如果选择单个字母，它将清除所选内容。其他选择都可以。

注意:我使用的代码的修改，我如何能定位一个元素旁边的用户文本选择?

好的，我想我明白了: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);
});

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

相关文章：