使用 JavaScript 清除文本选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3169786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear Text Selection with JavaScript
提问by man1
Simple question which I can't find the answer to: how can I use JavaScript (or jQuery) to deselect any text which may be selected on a webpage? E.G. user clicks and drags to highlight a bit of text -- I want to have a function deselectAll() which clears this selection. How should I go about writing it?
我找不到答案的简单问题：如何使用 JavaScript（或 jQuery）取消选择可能在网页上选择的任何文本？EG 用户单击并拖动以突出显示一些文本——我想要一个函数 deselectAll() 来清除此选择。我该怎么写呢？
Thanks for the help.
谢谢您的帮助。
回答by Gert Grenander
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();
}
回答by Tim Down
Best to test the features you want directly:
最好直接测试你想要的功能：
var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
if (sel.removeAllRanges) {
sel.removeAllRanges();
} else if (sel.empty) {
sel.empty();
}
}
回答by ChaseMoskal
State of De-selection Affairs 2014
2014 年取消选择事务的状态
I did some research of my own. Here's the function I wrote and am using these days:
我自己做了一些研究。这是我最近编写并使用的函数：
(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();
})();
Basically, getSelection().removeAllRanges()is currently supported by all modern browsers (including IE9+). This is clearly the correct method moving forward.
基本上，getSelection().removeAllRanges()目前所有现代浏览器（包括 IE9+）都支持。这显然是前进的正确方法。
Compatibility issues accounted for:
兼容性问题导致：
- Old versions of Chrome and Safari used
getSelection().empty() - IE8 and below used
document.selection.empty()
- 使用旧版本的 Chrome 和 Safari
getSelection().empty() - IE8及以下使用
document.selection.empty()
Update
更新
It's probably a good idea to wrap up this selection functionality for re-use.
包装此选择功能以供重用可能是个好主意。
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();
I've made this a community wiki so that you people can add functionality to this, or update things as the standards evolve.
我已经把它变成了一个社区维基，这样你就可以向它添加功能，或者随着标准的发展更新内容。
回答by Grinn
Here's the accepted answer, but in two lines of code:
这是公认的答案，但在两行代码中：
var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();
The only check I don't do is for the existence of removeAllRanges - but AFAIK there is no browser that has either window.getSelectionor document.selectionbut doesn'thave either a .emptyor .removeAllRangesfor that property.
我不做的唯一检查是 removeAllRanges 的存在 - 但 AFAIK 没有浏览器具有window.getSelection或document.selection但不具有该属性的.empty或.removeAllRanges。
回答by Zuul
window.getSelection() lets you access the selected text, from there, there's a few things you can do to manipulate it..
window.getSelection() 允许您访问选定的文本，从那里，您可以执行一些操作来操作它..
Read More: Developer Mozilla DOM Selection
阅读更多：开发者 Mozilla DOM 选择
