Disable text selection to avoid highlighting of words and protect the texts.


The first approach that we have tested is by listening to mouse up and down events. This is helpful if the site just deals with text and dragging and scrolling is not expected.

// code from

document.onselectstart=new Function('return false');
function ds(e){return false;}
function ra(){return true;}

The second approach would be by using CSS. The limit of this is that there is no CSS attribute for IE and thus will cause problem. As for the other browsers, here is the CSS properties that can be used

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

for the IE browsers, you can use the unselectable attribute to do this

<div unselectable="on"> Unselectable text </div>

but since this is not inherited, you'll have to put this to all element that you want to apply it.

The combination of both can be applied to ensure that the text selecting is avoided. Since the first approach uses javascript, you can also use javascript to display your text instead. That way, when javascript is disabled, no text will be shown.


  1. Discover news, pics and videos you otherwise wouldn't have at Or submit your blog postings to be part of the big collection.

  2. Nice naman! ^^ Hahahaha! I missed making websites in HTML... magagamit ko din ito sometime in my career! ^^

    BTW, relink me aah..

  3. thanks Ju-chan... yes, it is one thing you should learn.. kahit paano it would be useful :)

  4. It would be nice if you would allow selection of the examples on this page so I don't have to type all this myself ;)

  5. hi addalled!

    you can actually do that by clicking the 'view plain' on the upper left part of each example/code