Avoid unnecessary text selection on web pages

You know that annoying thing that happens when you try to click a link or a button on a page and you miss, and accidentally marks some text or html:

ScreenShot424
There is a fix for that.

Css fix:

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

via javascript: Disable Text Select – Stack Overflow.

Js IE fix: (probably needed for some versions of Internet Explorer…)

onselectstart = function(){ return false; }

Jquery IE fix:

In jQuery 1.8, this can be done as follows:

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery

I havent tested these anywhere… yet. But Stack Overflow  is usually right.

Leave a Reply