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?
Thanks for the help.
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();
}
}
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.
Compatibility issues accounted for:
getSelection().empty()
document.selection.empty()
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.
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.getSelection
or document.selection
but doesn't have either a .empty
or .removeAllRanges
for that property.
window.getSelection() lets you access the selected text, from there, there's a few things you can do to manipulate it..
Read More: Developer Mozilla DOM Selection
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();
}
add this to your script to prevent right clicking and text selecting.
Exceptions can be added to 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;}
©2020 All rights reserved.