Prevent Highlight of Text Table
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;
}
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;
}
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.
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()
}
You can try with focus() function on the selected text - the selection dissapears.
$('#someEl').focus();