Disable Text Selection With jQuery

I was recently working on an interface where there would be a log of dragging, scrolling and clicking – an unfortunate side effect of these type of things is that the user may sometimes unintentionally select text. Which this doesn’t break anything, it just looks bad can ruin the smooth experience you are trying to present the user with. It turns out that every browser has either some kind of hidden CSS or javascript function to prevent text selection.

I searched around and eventually came across this page on James Dempster’s site. He wrote a simple jQuery plugin to turn off text selection only for the elements you specify. His plugin works just fine, but I believe it can be simplified. Below is my version.

$(function(){
	$.extend($.fn.disableTextSelect = function() {
		return this.each(function(){
			if($.browser.mozilla){//Firefox
				$(this).css('MozUserSelect','none');
			}else if($.browser.msie){//IE
				$(this).bind('selectstart',function(){return false;});
			}else{//Opera, etc.
				$(this).mousedown(function(){return false;});
			}
		});
	});
	$('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect'
});

After you include jQuery on your page, just include this script and any element with a class of noSelect will not be able to have it’s text highlighted — easy! (Obviously you can change the class name to be whatever you want though.)

Do take note that the plugin is contained within the $(document).ready(function(){/*your code here*/}); (which can also be written as $(function(){/*your code here*/}).) That just sets it up as a method to be called. To call the method and disable text selection you just get a standard jQuery element and add the method onto it : $('.noSelect').disableTextSelect();

40 replies

  1. Ville Walveranta says:

    This was useful. Thanks for sharing!

  2. Romz says:

    Great idea and lightweight !
    Thanks a lot for sharing !

  3. Jeff says:

    Excellent solution – thanks a bunch for sharing.  Works perfectly!

  4. Ray Brown says:

    I’m building an on-screen keyboard for a client’s kiosk center, and this script really helps polish the UX by avoiding awkward text selection.  Thanks a bunch!

  5. jan says:

    Thanks for sharing! exactly what i needed.

  6. bara says:

    just a note by using “live” instead of “bind” u dont have to rebind if u add elements after the code is executed

  7. Greg says:

    For portable code, you should use ‘jQuery’ instead of ‘$’ in case jQuery.noConflict is on.

  8. Ari says:

    Hi friend,

    It isn’t working in Opera 10 , any solution please?

  9. Tim says:

    In the jQuery-ui core.js, it uses something similar, which I’ve found to be a slightly more reliable snippet of reusable code, in light of the Opera 10 comment just above.  I try to avoid jQuery-ui as a full-blown library just for simple things like this, so having the snippet built into my own code is quite nice.

    jQuery(this)
      .attr(‘unselectable’, ‘on’)
      .css(‘MozUserSelect’, ‘none’)
      .bind(‘selectstart.ui’, function() {
      return false;
      });

  10. Cipi says:

    Hey, this works great! Even better if you add the 9th post fix. But I have a question… I’m adding a lot of dynamic content to the page that must have noSelect class in order to not be selected, so each time the content changes, I must call the function to refresh the “selection prevention” and when I am having to much elements on the page, it stalls a little… But, if I enclose all of my content in a DIV and let it be noSelect, it is really fast, but <input> and <select> tags in that DIV become unusable… Can I somehow make certain elements inside noSelect DIV selectable? I tried to reverse your method, it works if I disable/enable the main DIV, but it doesn’t work on its child elements…

  11. Chris Barr says:

    Well, selecting by a class name instead of an ID is always slower, so if it’s always one element or the same elements with predicable ID’s just use that instead.

    That should make it a bit faster, but I’m not sure there’s an easy way to make it not disable form elements.  All I can think of is that you could possibly select your element you want to disable, and disable everything inside it except for those elements instead of the element itself.

    $(”#MyElement”).children(”:not(input,select)”). disableTextSelect();

    That might work, but that also might slow things down again if the element has a lot of children.

  12. I’ve made some very minor changes to improve it :-)

    /**
    *    http://chris-barr.com/entry/disable_text_selection_with_jquery/
    *    modified to be “$” safe by Dakkar Daemor [www.imaginific.com]
    */
    (function($) {
        $.fn.disableTextSelect = function() {
            return this.each(function(){
                if($.browser.mozilla){//Firefox
                    $(this).css(‘MozUserSelect’,‘none’);
                }else if($.browser.msie){//IE
              $(this).bind(‘selectstart’,function(){return false;});         }else{//Opera, etc.           $(this).mousedown(function(){return false;});         }       });   }   $(function($){       $(’.noSelect’).disableTextSelect();//No text selection on elements with a class of ‘noSelect’   }); })(jQuery);

  13. rycka says:

    Useful. Thanks.

  14. Stuart says:

    Very useful, thanks.  Most of our users would like the same dbl click functionality as found in Windows, and quite often when the text is highlighted in a table row, it looks messy and dated.

  15. Cipi says:

    P E R F E C T – thanx!!!! =))))

  16. Ryan says:

    Awesome plugin.  Thanks!

  17. Nam says:

    many thanks

  18. Seemly says:

    Many thanks for this plugin, it helped with a current project of mine.

    Kudos!

  19. Jim says:

    Excellent plugin. Saved me loads of time…. Thanks for sharing!

  20. Asmor says:

    Many thanks! Was working on a yes/no/maybe form element and was getting ugly selections if one clicked twice quickly (i.e. double clicked). This solved it nicely!

  21. Stif says:

    Thanks a lot, this script works well.

    But how would you disable text selection in Chrome?

    I’ve already found out that $.browser.safari returns true when in Chrome but I don’t know how to disable text selection…

  22. Stif says:

    regarding my previous comment
    BTW: using webKitUserSelect does not work.

    webKitUserSelect might work for fixed text but I’m using this script to disable text selection in a textbox. When using webKitUserSelect I cannot enter text at all

    • Chris Barr says:

      What you should use instead is $.browser.webkit because $.browser.safari will be depreciated soon in jQuery. Both Chrome and Safari use the same Webkit engine for rendering HTML.

      The code here should just work in Safari and Chrome.

  23. Shiro says:

    This code is not working
    $(”#MyElement”).children(”:not(input,select)”). disableTextSelect();

    I used all the possible combination to make a child element selectable, but it never work for me.

    Have you test it if it working?

    For example, I disable selection on the <body> tag, and enable selection on the tag.

    It never work for me.

    Please help, thanks

    • Chris Barr says:

      No, it doesn’t work that way. If you disable it on a parent element, then nothing inside it would be selectable. You will have to only select the elements you want to disable.

  24. Shiro says:

    @Chris
    oh, thank you, now I understood what you said above, and I just found out that the -moz-user-select inherited property automatically pass to the children.

  25. Eleanor says:

    Thanks for this simple solution to an annoying problem. :)

  26. Mahyar Sabeti says:

    Ctrl + A (select all) work in opera, safari, chrome

    How can disable Ctrl + A with jquery?

  27. hary says:

    i developed an autogenerated text field in jquery and text is selected by double click on it …..it works well in IE7 but in firefox text is not selected by double clicking……..plz give me solution….!!

  28. yashmal says:

    In chrome, if you click outside the scope of the selected element, and drag into the selected element, you are able to select the text. Is there a fix for this?

  29. Vilen says:

    Works Great! Thanks a lot!

  30. Constantin says:

    Very useful, thanks!

  31. Antony says:

    Thank you very much. Your script is work well.

  32. roman says:

    Nice script. Works very well.

  33. You, sir, are an adorable person for sharing this. Thanks!!!

  34. vyshak says:

    Thank you, its worked.

  35. Joshuasm32 says:

    In case you are interested, here is a method in which to disable all text selection (including clicking text 3 times), the usage of CTRL shortcuts in older browsers, and right-clicks using pure JS:

    function disableselect(e){
    return false
    }
    function reEnable(){
    return true
    }
    document.onselectstart=new Function (“return false”)
    if (window.sidebar){
    document.onmousedown=disableselect
    document.onclick=reEnable
    }

    var message=”Sorry, right-click has been disabled”;
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
    document.oncontextmenu=new Function(“return false”);
    function disableCtrlKeyCombination(e)
    {
    var forbiddenKeys = new Array(‘a’,‘n’,‘c’,‘x’,‘v’,‘j’,‘w’,’p’,’u’);
    var key;
    var isCtrl;
    if(window.event)
    {
    key = window.event.keyCode;
    if(window.event.ctrlKey)
    isCtrl = true;
    else
    isCtrl = false;
    }
    else
    {
    key = e.which;
    if(e.ctrlKey)
    isCtrl = true;
    else
    isCtrl = false;
    }
    if(isCtrl)
    {
    for(i=0; i<forbiddenKeys.length; i++)
    {
    if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
    {
    alert(‘Key combination CTRL + ‘+String.fromCharCode(key) +’ has been disabled.’);
    return false;
    }
    }
    }
    return true;
    }

    Try Selecting Me :P

    It is also possible to include Linux freeware to disable the selection of options such as print from a toolbar.

  36. Joshuasm32 says:

    Ugh. {body onKeyPress=”return disableCtrlKeyCombination(event);” onKeyDown=”return disableCtrlKeyCombination(event);” }

  37. Joshuasm32 says:

    In case you are interested, here is a method in which to disable all text selection (including clicking text 3 times), the usage of CTRL shortcuts in older browsers, and right-clicks using pure JS:

    [html]
    [head]
    [script]
    function disableselect(e){
    return false
    }
    function reEnable(){
    return true
    }
    document.onselectstart=new Function (“return false”)
    if (window.sidebar){
    document.onmousedown=disableselect
    document.onclick=reEnable
    }
    [/script]
    [body onKeyPress=”return disableCtrlKeyCombination(event);” onKeyDown=”return disableCtrlKeyCombination(event);”]
    var message=”Sorry, right-click has been disabled”;
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
    document.oncontextmenu=new Function(“return false”);
    function disableCtrlKeyCombination(e)
    {
    var forbiddenKeys = new Array(‘a’,‘n’,‘c’,‘x’,‘v’,‘j’,‘w’,’p’,’u’);
    var key;
    var isCtrl;
    if(window.event)
    {
    key = window.event.keyCode;
    if(window.event.ctrlKey)
    isCtrl = true;
    else
    isCtrl = false;
    }
    else
    {
    key = e.which;
    if(e.ctrlKey)
    isCtrl = true;
    else
    isCtrl = false;
    }
    if(isCtrl)
    {
    for(i=0; i<forbiddenKeys.length; i++)
    {
    if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
    {
    alert(‘Key combination CTRL + ‘+String.fromCharCode(key) +’ has been disabled.’);
    return false;
    }
    }
    }
    return true;
    }
    [/script]
    [p]Try Selecting Me :P[/p]
    [/body]
    [/html]

    It is also possible to include Linux freeware to disable the selection of options such as print from a toolbar.

Leave a Reply