How to Disable Text Selection Highlighting

CSS disable text selection

Don't apply these properties to the whole body. Move them to a class and apply that class to the elements you want to disable select:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

CSS or Javascript to disable text selection highlighting from CTRL + A

Possible Duplicate.

If you are allowed to use jquery, here is the answer you are looking for.

65 is ascii for 'A' and 97 for 'a' if you want to account for both.

$(function(){   
    $(document).keydown(function(objEvent) {

            if (objEvent.ctrlKey) {
                if ($(objEvent.target).not('input')){
                    if (objEvent.keyCode == 65 || objEvent.keyCode == 97) {                         
                        objEvent.preventDefault();
                    }
                }
            }        
    });
});   

edit: modified based on your comment to allow for input.

edit 2: if you include jQuery UI you can use disableSelection() instead of disableTextSelect()
otherwise try this.

edit 3: Sorry, disableSelection() is deprecated in jQuery 1.9 see here.. Try this simple hack instead of disableSelection(). replace objEvent.disableTextSelect(); with objEvent.preventDefault(); above.

edit 4: made it a bit cleaner.

css override disable text selection

The solution. Please check out the jsfiddle link below for a working example.

HTML

<h2>Unselectable/Selectable</h2><br/>
<p>You can't select any of this text but you can select the text in the box below because a css rule has been made specifically to reenable text selection for that particular element.<br/><br/></p>
<input name="title" id='selectMe' type="textbox" />

CSS

* {padding:20px; user-select:none;}
#selectMe {user-select:text; border:1px solid #000; padding:10px;}

http://jsfiddle.net/7zwr0ody/1/

How do I disable text selection with CSS or JavaScript?

<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>

---

Related Topics