Many times you need to prevent text selection on your web pages because of no one direct copy your web page content. In this article, we will share with you how to disable text selection on HTML web pages using jQuery and CSS.

Why did text selection make disable?

Many people have question why we need HTML web pages text selection to make disable for web users? it has a simple answer is for a security purpose. in some web pages, some text content needs to protect for a copy past functionality then this functionality is very helpful for us.

You can make any particular tag's text selection make disable. we will show it in the example. and you can do it simple CSS property user-select and also as well help of some jQuery coding. this is a very small functionality but very helpful.

Disable text selection using CSS

We can be done it also help of user-select CSS property. here you show how to use it and make text selection disable in your HTML web pages.

<!DOCTYPE html>
<html>
<head>
   <title>Disable text selection using CSS - HackTheStuff</title>
   <style type="text/css">
        body {
            user-select: none; /* supported by Chrome and Opera */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
        }
   </style>
</head>
<body>
  
<h3>Disable text selection using CSS</h3>
  
<p>The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.</p>
  
</body>
</html>

Disable text selection using jQuery

In this example, we will share with you how to make text selection disable using jQuery. in this example, we will create our own disableSelection() function for disabling text selection in our HTML web pages.

<!DOCTYPE html>
<html>
<head>
   <title>Disable text selection using jQuery - HackTheStuff</title>
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
  
<h3>Disable text selection using jQuery</h3>
   
<p class="disabletest">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   
<script type="text/javascript">
    (function($){
        $.fn.disableTextSelection = function() {
            return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
        };
    })(jQuery);
    
    $('.disabletest').disableTextSelection();
</script>
   
</body>
</html>

Look above example. I am here do make disable text selection on CSS class help of jQuery. here only the first p tag's text was not selected by on web page. but you can be done is on your own requirement.

Disable text selection using a jQuery UI library

You can also be done with the jQuery UI library. it provides much helpful functionality By default and HTML web page's test selection make disable is also provides it. you should import the jQuery UI library in your HTML code.

<!DOCTYPE html>
<html>
<head>
   <title>Disable text selection using jQuery UI library - HackTheStuff</title>
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
   
<h3>Disable text selection using jQuery UI library</h3>
   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   
<script type="text/javascript">
    $('body').disableSelection();
</script>
   
</body>
</html>

Conclusion

As you can see, text selection makes disable in HTML web pages using CSS and jQuery is very easy to use in any web application.

We hope that small tutorials help everyone. if you have known more ways to make disable text selection in HTML web pages or any issues or questions related to this tutorial so please comment below. Thanks.


Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

OR

6 Comments

  • Image
    카지노
    April 15, 2020 Reply

  • Image
    온라인카지노
    April 15, 2020 Reply

  • Image
    카지노사이트
    April 15, 2020 Reply

  • Image
    카지노
    April 15, 2020 Reply

  • Image
    라이브바카라
    April 15, 2020 Reply

  • Image
    cresent moon Cafe
    November 12, 2019 Reply

    Hello! Do you use Twitter? I'd like to follow you if that would be ok. I'm undoubtedly enjoying your blog and look forward to new updates. http://www.crescentmoonhky.com/

    Image
    Site Admin
    Sat December, 2019

    Hi cresent moon Cafe, Yes, we are also on Twitter and Faceboook Follow us on Twitter and like us on Facebook Thank you