使用JavaScript清除文本选择


122

我找不到答案的简单问题:如何使用JavaScript(或jQuery)取消选择可能在网页上选择的任何文本?EG用户单击并拖动以突出显示一些文本-我想要一个函数deselectAll()来清除此选择。我应该怎么写呢?

谢谢您的帮助。

Answers:


206
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先生。


4
假设存在document.selection意味着存在其empty()方法。您已经在所有其他情况下测试了该方法,因此您也可能会empty在最后一种情况下进行测试。
Tim Down'7

谢谢,在我的jquery.tableCheckbox.js插件中使用了它。
Marco Kerwitz

1
我根据您的建议创建了一个完整的工作示例,但添加了一些额外功能jsfiddle.net/mkrivan/hohx4nes最重要的一行是window.getSelection()。addRange(document.createRange()); 没有此IE,在某些情况下不会取消选择文本。而且我更改了方法检测的顺序。
Miklos Krivan '17

你救了我的天,我的朋友!我使用的是暂存器,在选择暂存器时整个页面都被选中,使用这个好的脚本,我在使用暂存器插件之前取消选择页面。基本上可以用!非常感谢!
合并

1
我认为window.getSelection().removeAllRanges();在IE(edge)和Safari中可以正常工作。
智利

48

最好直接测试所需的功能:

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

15

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,以便您可以向其添加功能或随着标准的发展而更新。


7
这和我的回答是一样的。4年没有任何变化。
蒂姆·唐

3
可怕。您不仅从字面上窃取了另一个海报的实现,而且在语法上完全破坏了它。
kamelkev

1

这是可接受的答案,但是使用两行代码:

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

该只检查我不这样做是removeAllRanges的存在-但据我所知,没有浏览器,无论是有window.getSelectiondocument.selection,但具有任何一个.empty.removeAllRanges该属性。



-1

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

可以将异常添加到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;}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.