Prevent Highlight of Text Table

Question

I have a table, and I'm allowing users to 'select' multiple rows. This is all handled using jQuery events and some CSS to visually indicate the row is 'selected'. When the user presses shift, it is possible to select multiple rows. Sometimes this cause text to become highlighted. Is there anyway to prevent this?

Answer 1

There is a CSS3 property for that.

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

Answer 2

If you want to have control when your users can select or not parts of you site, you can use this little jQuery plugin.

jQuery.fn.extend({ 
        disableSelection : function() { 
                return this.each(function() { 
                        this.onselectstart = function() { return false; }; 
                        this.unselectable = "on"; 
                        jQuery(this).css('user-select', 'none'); 
                        jQuery(this).css('-o-user-select', 'none'); 
                        jQuery(this).css('-moz-user-select', 'none'); 
                        jQuery(this).css('-khtml-user-select', 'none'); 
                        jQuery(this).css('-webkit-user-select', 'none'); 
                }); 
        } 
}); 

and use it as:

// disable selection on #theDiv object
$('#theDiv').disableSelection(); 

Otherwise, you can just use these css attributes inside your css file as:

#theDiv
 {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 3

Just one note on the answer from Cleiton above - the code sample seems to work well, but in order to be a good citizen in the jQuery world, you should return the jQuery object at the end of the function so that it's chainable - a simple one-line addition fixes that up:

jQuery.fn.extend({
    disableSelection : function() {
            this.each(function() {
                    this.onselectstart = function() { return false; };
                    this.unselectable = "on";
                    jQuery(this).css('-moz-user-select', 'none');
            });
            return this;
    }
});

Cheers, hope this is helpful.

Answer 4

I simply remove the selection that is made using the shift key. This might show a little flicker though

if (event.shiftKey) {
    window.getSelection().removeAllRanges()
}

Answer 5

You can try with focus() function on the selected text - the selection dissapears.

$('#someEl').focus();

Answer 6

If you have Jquery UI on your pages, just use

    $("element-selector").disableSelection();

Answer 7

::-moz-selection { /* Code for Firefox */  
    color: black;  
    background: none;
}

::selection {  
    color: black;  
    background: none;  
}  

from http://www.w3schools.com/cssref/sel_selection.asp
actually from the try-it section, after changing the values.
notice though that the cursor is still 'I' shaped...