203

Does jQuery or jQuery-UI have any functionality to disable text selection for given document elements?

Improve this question
4
  • 3
    Possible duplicate: stackoverflow.com/questions/1319126/prevent-highlight-of-text Commented Apr 23, 2010 at 15:57
  • @John: Does the link above answer your question? If it does not, you might want to throw in some more detail as to how your situation is different. Commented Apr 23, 2010 at 15:59
  • 1
    Yes it does. But although the answer is the same, that question is very specific so many can miss that answer having in mind more general question (as I did). Commented Apr 23, 2010 at 16:09
  • @Jhon: The other question has a jQuery solution too. Commented Apr 23, 2010 at 16:34

13 Answers 13

Reset to default
275

In jQuery 1.8, this can be done as follows:

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);
Improve this answer
Sign up to request clarification or add additional context in comments.

19 Comments

The JavaScript alternative works only for IE. "onselectstart" is not available for other browsers
@Omar: I'm well aware of that.
Thanks for this. I was working on a dragging slider and needed a way that text wouldn't be selected in the process.
To those of you who say "just don't" to disabling text selection (or anything else on SO for that matter), open thy minds just a bit. Often times people disable it for aesthetic reasons such as avoiding text selection on a double click of a label with text in it, etc. So either answer the question, or provide an actual counter point and specify what you're talking about negating, don't just scratch the idea out in a general manner.
|
101

If you use jQuery UI, there is a method for that, but it can only handle mouse selection (i.e. CTRL+A is still working):

$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9

The code is realy simple, if you don't want to use jQuery UI :

$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });
Improve this answer

6 Comments

the jquery ui function would be great, but it doesn't offer the same level of protection, it does prevent selecting things directly, but if you're carrying a selection from another dom object, you need the css rules too - heres the function = function () { return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) + ".ui-disableSelection", function( event ) { event.preventDefault(); }); }
Note that disableSelection() is deprecated in jQuery UI 1.9
It could also require .on('mousedown', false) to work, depending on your browser. Hovewer, it's dangerous to kill mousedown events on by default because this could probably brake existing functionality
Arg. It's annoying it's been depreciated. There's plenty of time when you want this legitimately.
I'm creating a right-click context menu on some anchor text, and I don't want the text to select on click. So yes, @Monk, this would qualify as a legitimate example.
|
76

I found this answer ( Prevent Highlight of Text Table ) most helpful, and perhaps it can be combined with another way of providing IE compatibility.

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

2 Comments

Chrome uses -webkit-user-select
Always appreciate the CSS way to do things instead of using jQuery or JS in general. Just like jQuery animations vs CSS transitions, the way built into the browser is always going to be the best and most efficient.
17

Here's a more comprehensive solution to the disconnect selection, and the cancellation of some of the hot keys (such as Ctrl+a and Ctrl+c. Test: Cmd+a and Cmd+c)

(function($){

  $.fn.ctrlCmd = function(key) {

    var allowDefault = true;

    if (!$.isArray(key)) {
       key = [key];
    }

    return this.keydown(function(e) {
        for (var i = 0, l = key.length; i < l; i++) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                allowDefault = false;
            }
        };
        return allowDefault;
    });
};


$.fn.disableSelection = function() {

    this.ctrlCmd(['a', 'c']);

    return this.attr('unselectable', 'on')
               .css({'-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none'})
               .bind('selectstart', false);
};

})(jQuery);

and call example:

$(':not(input,select,textarea)').disableSelection();

jsfiddle.net/JBxnQ/

This could be also not enough for old versions of FireFox (I can't tell which). If all this does not work, add the following:

.on('mousedown', false)
Improve this answer

2 Comments

Why do you call attr('unselectable', 'on') twice? Is it a typo or is it useful?
This worked great for me, but I had to disable the ".each(function() { $(this).attr('unselectable','on') .bind('selectstart',function(){ return false; }); });" section for my particular web app (JQuery Mobile), just in case it helps anyone..
14

The following would disable the selection of all classes 'item' in all common browsers (IE, Chrome, Mozilla, Opera and Safari):

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);
Improve this answer

3 Comments

Not complicated - Excellent! Thank you. For disabled looking; I addded .attr('disabled', 'disabled')
Update: instead of .attr('disabled', 'disabled'), I used .attr('readonly', 'readonly'). Disabled prevents posting my model variable in MVC(model variable is null). Readonly still have disabled looking(I use bootstrap) and it allows posting the item value
Excellent bro, i using this code to replace "pointer-events: none;", that not work in IE 11. regards
7 
        $(document).ready(function(){
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
        });
Improve this answer

1 Comment

Could you write a brief summary of the answer in addition to the code?
7

This is actually very simple. To disable text selection (and also click+drag-ing text (e.g a link in Chrome)), just use the following jQuery code:

$('body, html').mousedown(function(event) {
    event.preventDefault();
});

All this does is prevent the default from happening when you click with your mouse (mousedown()) in the body and html tags. You can very easily change the element just by changing the text in-between the two quotes (e.g change $('body, html') to $('#myUnselectableDiv') to make the myUnselectableDiv div to be, well, unselectable.

A quick snippet to show/prove this to you:

$('#no-select').mousedown(function(event) {
  event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>

Please note that this effect is not perfect, and performs the best while making the whole window not selectable. You might also want to add

the cancellation of some of the hot keys (such as Ctrl+a and Ctrl+c. Test: Cmd+a and Cmd+c)

as well, by using that section of Vladimir's answer above. (get to his post here)

Improve this answer

Comments

6

This can easily be done using JavaScript This is applicable to all Browsers

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE 
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
 </script>

Call to this function

<script type="text/javascript">
   disableSelection(document.body)
</script>
Improve this answer

2 Comments

This one is great! But how do we stop the "focus" on it?
This answer is outdated by 2013
4

I've tried all the approaches, and this one is the simplest for me because I'm using IWebBrowser2 and don't have 10 browsers to contend with:

document.onselectstart = new Function('return false;');

Works perfectly for me!

Improve this answer

Comments

1

1 line solution for CHROME: 

body.style.webkitUserSelect = "none";

and FF: 

body.style.MozUserSelect = "none";

IE requires setting the "unselectable" attribute (details on bottom).

I tested this in Chrome and it works. This property is inherited so setting it on the body element will disable selection in your entire document.

Details here: http://help.dottoro.com/ljrlukea.php

If you're using Closure, just call this function:

goog.style.setUnselectable(myElement, true);

It handles all browsers transparently.

The non-IE browsers are handled like this:

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

Defined here: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

The IE portion is handled like this:

if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
  for (var i = 0, descendant; descendant = descendants[i]; i++) {
    descendant.setAttribute('unselectable', value);
  }
}
Improve this answer

Comments

1

I think this code works on all browsers and requires the least overhead. It's really a hybrid of all the above answers. Let me know if you find a bug!

Add CSS:

.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}

Add jQuery:

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

Optional: To disable selection for all children elements as well, you can change the IE block to:

$(this).each(function() {
    $(this).attr('unselectable','on')
    .bind('selectstart',function(){ return false; });
});

Usage:

$('.someclasshere').disableSelection();
Improve this answer

Comments

0

One solution to this, for appropriate cases, is to use a <button> for the text that you don't want to be selectable. If you are binding to the click event on some text block, and don't want that text to be selectable, changing it to be a button will improve the semantics and also prevent the text being selected.

<button>Text Here</button>
Improve this answer

Comments

-1

Best and simplest way I found it, prevents ctrl + c, right click. In this case I blocked everything, so I don't have to specify anything.

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.