Prevent Highlight of Text Table

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?

Answers:

Answer

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

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

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

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

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

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

If you have Jquery UI on your pages, just use

    $("element-selector").disableSelection();
Answer
::-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...

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.