Disable Text Selection via Javascript and/or CSS

PROBLEM:

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

SOLUTION:

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 http://www.felgall.com/jstip35.htm

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

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.