使用JavaScript清除文本选择

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

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

例如，用户单击并拖动以突出显示一点文本-我希望有一个函数deselectAll（）清除此选择。我该怎么写呢

谢谢你的帮助

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

---

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

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

---

我已将此设置为一个社区wiki，以便您可以在此基础上添加功能，或随着标准的发展而更新内容。

以下是公认的答案，但有两行代码：

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

---

我唯一没有做的检查是检查removeAllRanges是否存在——但很可能没有浏览器既有

窗口。getSelection

或

文档。selection

，也没有

空的属性或
。removeAllRanges
。
将其添加到脚本中以防止右键单击和文本选择

可以将异常添加到变量“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;}

2021答案


大多数浏览器都支持
removeAllRanges（）
，macOS或iOS上的Safari除外


empty（）
是
removeAllRanges（）
的别名，受支持，包括非常旧的，IE除外。此别名是，因此应该可以安全依赖



结论

只需使用
getSelection（）.empty（）
。不需要其他答案中的帮助函数、嵌套三元ifs、构造函数和Ninja banzai等。也许十年前就需要了，但现在不需要了

如果您确实需要IE支持，您可以测试
文档。选择
：

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

（未在IE上测试）
这假设存在
文档。选择
意味着存在
empty（）
方法。您已经在其他情况下测试了该方法，所以您也可以在最后一种情况下测试
empty
。在我的插件中使用了该方法，谢谢。我已经根据您的建议创建了一个完整的工作示例，但添加了一些额外内容。最重要的一行是window.getSelection（）.addRange（document.createRange（））；没有这个IE在某些情况下不会取消选择文本。我已经改变了检测方法的顺序。你救了我一天，我的朋友！我使用的是scratchpad，当抓取整个页面时，我选择了这个好脚本，在使用scratchpad插件之前，我取消了对页面的选择。基本上是有效的！谢谢！我发现
window.getSelection（）.removeAllRanges（）在IE（edge）和Safari中运行良好。这与我的答案相同。4年来什么都没变。太可怕了。你不仅从另一张海报上窃取了这个实现，而且在语法上完全破坏了它。
removeAllRanges（）
在macOS和iOS的Safari中都受支持，除非它被删除，因为它被广泛使用，我对此表示高度怀疑。我同意删除对非常旧的IE的检查是安全的（这不是被问到的问题。很明显，选择是必需的，但是OP正在寻找一种方法，在不再需要时以编程方式取消选择区域。