Question

I am creating a web-app and selection of elements or text of any sort is unnecessary and doesn’t look nice.

I would like to stop any sort of selection initiated by mouse click and dragging of images except in one single div where I want the text to be selectable, however this is not a must since I will put a button to copy it to the clipboard.

How can I achieve this without crippling input boxes?

I tried many solutions but none is overall preventing this on the page entirety without breaking input boxes.

Thank you.

Answer 1

If you already have jQuery UI enabled, you could simply chain .disableSelection() Otherwise, use this nice plugin i copycat’d from here How to disable text selection using jQuery?

(function($){

$.fn.disableSelection = function() {
    return this.each(function() {           
        $(this).attr('unselectable', 'on')
               .css({
                   '-ms-user-select':'none'
                   '-moz-user-select':'none',
                   '-webkit-user-select':'none',
                   'user-select':'none',
               })
               .each(function() {
                   this.onselectstart = function() { return false; };
               });
    });
};

})(jQuery);