How to prevent the browser to select text

If you are a web developer, then you probably need to prevent the user from selecting text. I’ll make a reservation that I don’t mean a complete ban to protect the text, but a ban on the allocation of various signatures, inscriptions, etc. where the selection interferes with the operation of the interface and the user (most often with drag & drop, or selecting text with a double click). This primarily applies to web applications and in no way concerns information sites.

What can we do? Until now, not much thought. But before proceeding to the consideration of a new (personally for me) method, consider what possibilities browsers offer us to combat text selection.

Internet Explorer

This browser gives us two options:

1. For elements, set the unselectable attribute with the value on. But there is one nuance: the block text with such an attribute cannot be selected (that is, you cannot start a selection with this element, and clicking on such an element will not remove the selection from the text, if such is selected), but if it contains other elements (for example, “ harmless "span, b, etc.) then you can select the text in them. In addition, if text selection is started from a block without such an attribute, the text inside the block with the unselectable attribute will also be selected. In such a situation, the solution is one - to put this attribute to all (!) Elements, which is inconvenient and not practical.
2. Intercept the selectstart event. In other words, adding the element onselectstart = “return false” (for example to BODY) prohibits the selection of text inside it. Again, the nuance: if you start to select the text outside of such a block, the text inside it stands out without problems.

FireFox (browsers on the gecko engine), Safari (browsers on the KHTML engine)

These browsers have a more advanced mechanism that prohibits the selection of text in any form. This is done through the CSS user-select property with a value of none, which is included in CSS3. But before this property is approved, browsers democratically made it their own engine chip, calling the property -moz-user-select and -khtml-user-select, respectively. It turns out to prohibit the selection of text within a block, it is enough to write:

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

And it's in the hat.

Other browsers

But as for other browsers, they have not noticed such mechanisms. Generally no. Of course, Opera is ahead of the rest, for it prohibiting the selection of text is tantamount to the worst crime. But there is one mogilnichek :)
Studying the Opera file with hacks for sites yesterday, I came across interesting lines:

 document.addEventListener ('mousemove', function (e) {
   if (e.target.getAttribute ('unselectable') == 'on')
     e.target.ownerDocument.defaultView.getSelection (). removeAllRanges ();
 }, false);

Recall the unselectable attribute of Internet Explorer, and it becomes clear that in this case we are struggling with the selection of text. Having developed the idea, I got some cross-browser solution:

 function preventSelection (element) {
   var preventSelection = false;

   function addHandler (element, event, handler) {
     if (element.attachEvent) 
       element.attachEvent ('on' + event, handler);
     else 
       if (element.addEventListener) 
         element.addEventListener (event, handler, false);
   }
   function removeSelection () {
     if (window.getSelection) {window.getSelection (). removeAllRanges ();  }
     else if (document.selection && document.selection.clear)
       document.selection.clear ();
   }
   function killCtrlA (event) {
     var event = event ||  window.event;
     var sender = event.target ||  event.srcElement;

     if (sender.tagName.match (/ INPUT | TEXTAREA / i))
       return;

     var key = event.keyCode ||  event.which;
     if (event.ctrlKey && key == 'A'.charCodeAt (0)) //' A'.charCodeAt (0) can be replaced by 65
     {
       removeSelection ();

       if (event.preventDefault) 
         event.preventDefault ();
       else
         event.returnValue = false;
     }
   }

   // do not give text to the mouse
   addHandler (element, 'mousemove', function () {
     if (preventSelection)
       removeSelection ();
   });
   addHandler (element, 'mousedown', function (event) {
     var event = event ||  window.event;
     var sender = event.target ||  event.srcElement;
     preventSelection =! sender.tagName.match (/ INPUT | TEXTAREA / i);
   });

   // dblclick
   // if you hang the function not on the dblclick event, you can avoid
   // temporary text selection in some browsers
   addHandler (element, 'mouseup', function () {
     if (preventSelection)
       removeSelection ();
     preventSelection = false;
   });

   // wrestling ctrl + A
   // most likely it is not necessary, besides there is a suspicion
   // that in the case of the need for such a function 
   // hang once on the document and not on the element
   addHandler (element, 'keydown', killCtrlA);
   addHandler (element, 'keyup', killCtrlA);
 }

Calling this function, for example:

preventSelection(document);

you disable the selection in the entire document, except for the elements INPUT and TEXTAREA.
Comments:

1. Opera does not allow to handle the dblclick event, so in this browser it is still possible to select text with a double click.
2. Ctrl + A:
   
   1. In Opera, a long (2-3 seconds) hold of this combination causes the selection of the text until it is released. And if you press the A key first and then the Ctrl key, the selection disappears. Otherwise it remains.
   2. Safari does not handle keydown for keys while holding down Ctrl. Therefore, the selection of the text disappears only after the keys are released. Moreover, this browser is characterized by the behavior of Opera, in terms of how to release the keys (if you press Ctrl first, the selection will remain).
   
   
3. Double-click text selection:
   
   1. Safari & FireFox highlight the word, and immediately remove the selection. That is, there is the effect of short-term text selection.
   2. Opera does not allow to prohibit the default behavior. It highlights the word and brings up the context menu.
   
   

Other features not identified.
It was tested on FireFox 2.0.11, IE 6.0, Opera 9.24, Safari 3.0.3 (Win).
Of course, the solution is not perfect, and it requires JavaScript (on the other hand, this is necessary in web applications that already use JS). But this is better than nothing, and quite cross-browser (of course, additional code may be required for some browsers and their versions).
I will be glad to comments, comments, additions.
UPDATE In view of the fact that by the end of the article many apparently forget the beginning, or do not read it carefully, I repeat the first essence of the first paragraph. In this article, I did not solve the problem of completely prohibiting the selection of text to protect it from copying, but meant a ban on the allocation of various signatures, inscriptions, etc. where selection hinders the operation of the interface and the user (most often when drag & drop, or selecting text with a double click). This primarily applies to web applications and in no way concerns the usual information sites.