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; }