You can find a lot of search engine results when you look for methods to block the highlighting of text in your HTML. Unfortunately, the top results for disabling text selection either aren’t fully supported (the CSS way) or could cause scripting errors.

In this article, I will show you the proper, cross-browser way to disable and re-enable text selection using JavaScript.

Compatibility

This code is current as of 08/2013 and has been tested in the following listed below:

IE7, IE8, IE9, Firefox, Safari, Chrome, Opera

If you are looking to disable text selection on an iOS device, check out this demo of the simple CSS property to do that (-webkit-user-select: none;)

The wrong way of doing it

Here is the quick and dirty way that you will come across everywhere. Avoid using this!

JAVASCRIPTview code 
element.onselectstart = function(){ return false };
element.onmousedown = function(){ return false };

Why is this wrong? This method overwrites selectstart or mousedown events that those elements might have already. If you have read my other scripting articles, you know I have covered that issue more than once. What you want to do is add a new event to the stack, not overwrite it.

Also, sites that teach this method always seem to leave out the code to re-enable text selection once it has been disabled. I’ll show you that with the proper method below.

The RIGHT way of doing it

JAVASCRIPTview code 
function disableSelect(el){			
    if(el.addEventListener){
        el.addEventListener("mousedown",disabler,"false");
    } else {
        el.attachEvent("onselectstart",disabler);
    }
}
 
function enableSelect(el){
    if(el.addEventListener){
	el.removeEventListener("mousedown",disabler,"false");
    } else {
        el.detachEvent("onselectstart",disabler);
    }
}
 
function disabler(e){
    if(e.preventDefault){ e.preventDefault(); }
    return false;
}

Put the 3 functions above anywhere in your script.

To disable text selection on an element, use disableSelect(yourElement).
To enable text selection on an element, use enableSelect(yourElement).

This way will work across browsers and will not interfere with any existing events. If this tip helped you, leave a comment!