Prevent Highlight of Text

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 and data-wise indicate the row is 'selected'. When the user presses shift, it is possible to select multiple rows. However, sometimes this cause text to become highlighted. Is there anyway to programmatically prevent this?

Answer 1

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

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

Answer 2

Just, write something like:

var domNode = $('#theDiv');
if (jQuery.browser.msie) {
   domNode.get(0).onselectstart = function () { return false; };
} else
{
    domNode.get(0).onmousedown = function(e){e.preventDefault()}
}

---

EDIT:

Searching on the internet, I found a blog post with a great ideia, see: http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/

So, you can insert into your js file:

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

and use it instead:

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

Answer 3

There is a CSS3 property for that.

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

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()
}