JavaScript non selectable text not working in Chrome/Internet Explorer

In Firefox seems fine, Chrome and Internet Explorer the text is still selectable, is there any way around this? The code was taken from another question, (which I can't find right now) so it may be out of date?

// Prevent selection
function disableSelection(target) {
    if (typeof target.onselectstart != "undefined") // Internet Explorer route
        target.onselectstart = function() { return false }
    else if (typeof target.style.MozUserSelect != "undefined") // Firefox route
        target.style.MozUserSelect = "none"
    else // All other routes (for example, Op开发者_JAVA百科era)
        target.onmousedown = function() { return false }
}

Used in code as:

disableSelection(document.getElementById("gBar"));

---

For webkit use khtmlUserSelect instead of MozUserSelect .

In opera and MSIE you may set the unselectable-property to "On"

As the both styles related to gecko/webkit are CSS, you can use a class to apply it:

<script type="text/javascript">
<!--
function disableSelection(target)
{
  target.className='unselectable';
  target.setAttribute('unselectable','on');
}
//-->
</script>
<style type="text/css">
<!--
.unselectable{
-moz-user-select:none;
-khtml-user-select: none;
}
-->
</style>

Note: unselectable will not pass on child-elements, so if you have there anything else than textNodes inside target, you need the workaround you already have there for MSIE/opera.

---

all of the above examples is too complicated.. based on the browser version. I got simle solution ... works for all browsers!

// you can select here which html element you allow to be selected
var ExcludeElems = ["INPUT","SELECT","OPTION"]



function disableSelection (target) {
   // For all browswers code will work .....
   target.onmousedown = function (e) 
  {
     var i;
     var e = e ? e : window.event;

     if (e) 
      for (i=0; i<ExcludeElems.length;i++)
        if (e.target.nodeName == ExcludeElems[i] ) 
           return true;
     return false;
  }

if you need you can make this function more complicated. Use this code for any container element ...

disableSelection (document) 
//disableSelection (document.body) 
//disableSelection (divName) ....

---

For Wekbit (e.g. Chrome and Safari) you can add:

else if (typeof target.style.webkitUserSelect != "undefined") // Webkit route
    target.style.webkitUserSelect = "none";

For IE, use 'unselectable':

else if (typeof target.unselectable != "undefined") // IE route
    target.unselectable = true;

Reference: http://help.dottoro.com/ljrlukea.php

---

Like the MozUserSelect styling in Firefox you can use -webkit-user-select: none for Webkit based browser (like Safari and Chrome).

I think that you can use -o-user-select: none in Opera. But I have not tested it.

// Prevent selection
function disableSelection(target) {
    if (typeof target.onselectstart != "undefined") //IE route
        target.onselectstart = function() { return false }
    else if (typeof target.style.userSelect != "undefined") //Some day in the future?
        target.style.userSelect = "none"
    else if (typeof target.style.webkitUserSelect != "undefined") //Webkit route
        target.style.webkitUserSelect = "none"
    else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
        target.style.MozUserSelect = "none"
    else //All other route (ie: Opera)
        target.onmousedown = function() { return false }
}

For IE, maybe this can help you: http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx