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?

possible duplicate of [CSS rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) — Dan, Jul 18 '13 at 13:59

Eli Grey · Accepted Answer · 2014-10-31T04:09:21.780

74

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

edited Oct 31 '14 at 04:09

answered Aug 23 '09 at 18:03

Eli Grey

35,104
14
75
93

20

Too bad Internet Explorer doesn't care. Tested in 6-8. – Nathan Taylor Aug 23 '09 at 19:28
1

@NathanTaylor After googling you will find a duplicate where this is already solved: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting – Dan Jul 18 '13 at 13:59
`Validation (CSS 3.0): "moz-none" is not a valid value for the "-moz-user-select" property.` And indeed, this didn't work for Firefox until I changed `moz-none` to `none`. – Nolonar Oct 29 '14 at 12:19

Cleiton · Answer 2 · 2016-01-04T19:24:12.020

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

score 13 · Answer 3 · answered Nov 21 '10 at 20:16

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.

He does this with "return this.each(function() {..." – frontendbeauty Oct 21 '11 at 23:12 — frontendbeauty, Oct 21 '11 at 23:12

score 3 · Answer 4 · answered Aug 24 '09 at 07:40

3

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

answered Aug 24 '09 at 07:40

ckuijjer

13,293
3
40
45

score 1 · Answer 5 · answered Aug 23 '09 at 17:57

1

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

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

answered Aug 23 '09 at 17:57

gregor

558
4
11

score 1 · Answer 6 · answered Nov 04 '11 at 20:22

1

If you have Jquery UI on your pages, just use

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

answered Nov 04 '11 at 20:22

Shadrack Orina

7,713
2
31
36

1

This is undocumented but should work if you have jQuery UI core – Shadrack Orina Nov 04 '11 at 20:26
good thing about this solution is that its also applicable to IE and replicate the functionality of solutions already mentioned if you look at the code. – sksallaj Feb 12 '13 at 14:03
1

Note that disableSelection() is deprecated in jQuery UI 1.9 – mar10 May 14 '13 at 06:06

score 0 · Answer 7 · answered May 30 '15 at 18:42

0

::-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...

answered May 30 '15 at 18:42

yuval klein

1

Note: The ::selection pseudo-element was drafted for CSS Selectors Level 3, but removed before the Recommendation status. So, at the moment, the ::selection pseudo-element is not in any specification. (However, it may be re-added to future CSS specifications.) – luk2302 May 30 '15 at 18:50

Prevent Highlight of Text Table

7 Answers7

Linked