使用 JavaScript 清除文本选择

Question

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

如何使用 JavaScript（或 jQuery）取消选择网页上可能选择的任何文本？

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

感谢您的帮助。

Answer 1

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();
}

Credit to Mr. Y.

Answer 2

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

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

Answer 3

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();
})();

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

解决的兼容性问题：

• 使用旧版本的 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();

我已将其设为社区 wiki，以便您可以向其中添加功能，或随着标准的发展更新内容。

Answer 4

这是公认的答案，但只有两行代码：

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

我不做的唯一检查是是否存在 removeAllRanges - 但 AFAIK 没有浏览器具有 window.getSelection 或 document.selection 但 没有 有 @987654324 @ 或 .removeAllRanges 用于该属性。

Answer 5

将此添加到您的脚本中以防止右键单击和文本选择。

可以将异常添加到 var 'om'。

var d=document,om=['input','textarea','select'];;
function ie(){if(d.all){(mg);return false;}}function mz(e){if(d.layers||(d.getElementById&&!d.all)){if(e.which==2||e.which==3){(mg);return false;}}}if(d.layers){d.captureEvents(Event.mousedown);d.onmousedown=mz;}else{d.onmouseup=mz;d.oncontextmenu=ie;}d.oncontextmenu=new Function('return false');om=om.join('|');function ds(e){if(om.indexOf(e.target.tagName.toLowerCase())==-1);return false;}function rn(){return true;}if(typeof d.onselectstart!='undefined')d.onselectstart=new Function('return false');else{d.onmousedown=ds;d.onmouseup=rn;}

Answer 6

2021 年答案

• 大多数浏览器都支持

  removeAllRanges()，macOS 或 iOS 上的 Safari 除外。

• empty() 是removeAllRanges() 的别名，由all browsers 支持，包括非常旧的，IE 除外。这个别名是defined in the specification，所以应该可以安全地依赖。

结论

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

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

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

（未在 IE 上测试）