javascripttextjquery-ui-selectable

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, Opera)
        target.onmousedown = function() { return false }
}

Used in code as:

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

Solution

  • 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.