CSS & jQuery – How to Disable Text Selection Highlighting?

In some cases, we don’t want others to copy selected text. To prevent text on a webpage we can opt for CSS, Pure JavaScript or jQuery solution. We will discuss one by one.

Let’s start…

CSS Method

We can disable text selection using some CSS styling, user-select solves the purpose.

.disable-select{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

<span class="disable-select">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer

</span>

Now this class disable-select will prevent text selection having user-select:none property

How to select all text on click?

We can also enable select all text on click on the text.

.copy-all-text{  
  -webkit-user-select: all;  /* Chrome all / Safari all */
  -moz-user-select: all;     /* Firefox all */
  -ms-user-select: all;      /* IE 10+ */
  user-select: all;          /* Likely future */   
}

<span class="copy-all-text">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer

</span>

 

JavaScript Method

If you want to go for JavaScript method, then you need to add unselectable attribute set to on, then add a style of user-select to none. Here are also overriding dragstart and selectstart event to false

var selector = $("span");
selector.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart dragstart', false);

Or Other JS Method

This method will simply add onselectstart then set to return false

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

//Call above method
disableSelection(document.body);

//By Class Name Selector
disableSelection(document.querySelector(".no-select"));

jQuery Method

If the application is already using the jQuery library then we can also opt for a jQuery method for ease.

(function($){
    $.fn.disableTextSelection = function() {
        return this
        .attr('unselectable', 'on')
        .css('user-select', 'none')
        .on('selectstart dragstart', false);
    };
})(jQuery);

JavaScrip and jQuery method will also work in older versions of IE.