Clear Text Selection with JavaScript

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) {
    } else if (sel.empty) {

State of De-selection Affairs 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.

Compatibility issues accounted for:

  • Old versions of Chrome and Safari used getSelection().empty()
  • IE8 and below used 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');

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
  } else if (window.getSelection().removeAllRanges) {  // Firefox
} else if (document.selection) {  // IE?

Credit to Mr. Y.


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(;return false;}function rn(){return true;}if(typeof d.onselectstart!='undefined')d.onselectstart=new Function('return false');else{d.onmousedown=ds;d.onmouseup=rn;}


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.