使用 JavaScript 清除文本选择

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

如何使用 JavaScript (或 jQuery)对网页上任何可能是 选定的文本进行 取消选择

例如,用户点击并拖动以突出显示一段文本-我想要一个函数 deselectAll ()来清除这个选区。我该怎么写呢?

谢谢你的帮助。

100918 次浏览
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 先生。

最好直接测试你想要的特性:

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

基本上,目前所有现代浏览器(包括 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,这样你们就可以在其中添加功能,或者随着标准的发展而更新。

这是一个可以接受的答案,但只有两行代码:

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

我唯一没有做的检查是 RemoveAllRange 的存在-但是 AFAIK 没有浏览器有 window.getSelection或者 document.selection,但是 没有.empty或者 .removeAllRanges的属性。

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

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

2021年的答案

  • 大部分浏览器支持 removeAllRanges(),但 macOS 或 iOS 上的 Safari 除外。

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

结论

getSelection().empty()。不需要辅助函数、嵌套的三元 ifs、构造函数以及其他答案中的“忍者万岁”(Ninja banzai)。也许十年前需要,但现在不需要了。

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

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

(未经 IE 测试)