使用 JavaScript 清除文本选择

IT技术 javascript jquery
2021-02-08 09:06:09

我找不到答案的简单问题:

我如何使用JavaScript(或jQuery的),以取消其可以是任何文字选择在网页上?

EG 用户单击并拖动以突出显示一些文本 - 我想要一个函数 deselectAll() 来清除此选择。我该怎么写呢?

谢谢您的帮助。

6个回答
if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}

归功于 Y 先生。

在我的jquery.tableCheckbox.js插件中使用了这个,谢谢。
2021-03-18 09:06:09
这假设 的存在document.selection意味着empty()方法的存在您已经在所有其他情况下测试了该方法,因此您也可以empty在最后一种情况下进行测试
2021-03-21 09:06:09
你拯救了我的一天,我的朋友!我正在使用暂存器,当抓取整个页面时,我选择了这个好的脚本,然后在使用暂存器插件之前取消选择我的页面。基本上它有效!非常感谢!
2021-03-24 09:06:09
我已经根据您的建议创建了一个完整的工作示例,但添加了一些额外内容jsfiddle.net/mkrivan/hohx4nes最重要的一行是 window.getSelection().addRange(document.createRange()); 没有这个 IE 在某些情况下不会取消选择文本。我改变了方法检测的顺序。
2021-04-08 09:06:09
我发现它window.getSelection().removeAllRanges();在 IE(edge) 和 Safari 中运行良好。
2021-04-10 09:06:09

最好直接测试你想要的功能:

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}

2014 年取消选择事务的状态

我自己做了一些研究。这是我最近编写并使用的函数:

(function deselect(){
  var selection = ('getSelection' in window)
    ? window.getSelection()
    : ('selection' in document)
      ? document.selection
      : null;
  if ('removeAllRanges' in selection) selection.removeAllRanges();
  else if ('empty' in selection) selection.empty();
})();

基本上,getSelection().removeAllRanges()目前所有现代浏览器(包括 IE9+)都支持。这显然是前进的正确方法。

兼容性问题导致:

  • 使用旧版本的 Chrome 和 Safari getSelection().empty()
  • IE8及以下使用 document.selection.empty()

更新

包装此选择功能以供重用可能是个好主意。

function ScSelection(){
  var sel=this;
  var selection = sel.selection = 
    'getSelection' in window
      ? window.getSelection()
      : 'selection' in document
        ? document.selection
        : null;
  sel.deselect = function(){
    if ('removeAllRanges' in selection) selection.removeAllRanges();
    else if ('empty' in selection) selection.empty();
    return sel; // chainable :)
  };
  sel.getParentElement = function(){
    if ('anchorNode' in selection) return selection.anchorNode.parentElement;
    else return selection.createRange().parentElement();
  };
}

// use it
var sel = new ScSelection;
var $parentSection = $(sel.getParentElement()).closest('section');
sel.deselect();

我已经把它变成了一个社区维基,这样你们就可以向它添加功能,或者随着标准的发展更新内容。

可怕。你不仅从另一张海报上窃取了实现,而且在语法上完全破坏了它。
2021-03-16 09:06:09
这和我的回答一样。4 年间什么都没有改变。
2021-04-08 09:06:09

2021 答案

  • removeAllRanges()大多数浏览器都支持,除了 macOS 或 iOS 上的 Safari。

  • empty()所有浏览器的别名removeAllRanges()并受其支持,包括非常旧的浏览器,IE 除外。这个别名是在规范中定义的,所以应该可以安全地依赖。

结论

只需使用getSelection().empty(). 不需要其他答案中的辅助函数、嵌套的三元 if、构造函数和诸如此类的 Ninja banzai。也许十年前需要,但现在不需要了。

如果你真的需要 IE 支持,你可以测试document.selection

(window.getSelection ? window.getSelection() : document.selection).empty()

(未在 IE 上测试)

removeAllRanges()macOS 和 iOS 中的 Safari 都支持,除非它已被删除,我对此表示高度怀疑,因为它已被广泛使用。我同意现在删除对真正旧的 IE (<= 8) 的检查是安全的,但除此之外,情况在过去十年中没有发生实质性变化。我的建议是window.getSelection().removeAllRanges(),这也将涵盖您在 IE 中返回到版本 9。 另请注意,在某些(罕见)情况下,window.getSelection()可以返回null,因此可能值得检查一下,因此其他答案中的一些 ninja banzai 内容。
2021-04-05 09:06:09

这是公认的答案,但在两行代码中:

var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();

我不做的唯一检查是 removeAllRanges 的存在 - 但 AFAIK 没有浏览器具有window.getSelectiondocument.selection具有该属性.empty.removeAllRanges