Reading Time: 5 minutes

888 Views

Inside this article we will see the concept i.e Disable Text Selection on Web Page Using jQuery and CSS. Article contains the classified information about Disable text selection concept.

Disable Text Selection on web pages is used where we want to protect website content from internet users. Sometimes we don’t want that site content should be copied so this concept is useful to protect or disable text selection.

Text selection can be done using either jQuery or CSS. Here, we will see both these cases.

Learn More –

Let’s get started.

Disable Text Selection Using CSS

Here,

We will use the concept of CSS to disable text selection on HTML web page.

<!DOCTYPE html>
<html>
<head>
   <title>How To Disable Text Selection on Html Web page Using jQuery & CSS</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>How To Disable Text Selection on Html Web page Using jQuery & CSS</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>
</body>
</html>

Concept

Here, is the CSS which is to disable text selection.

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 */
}

Disable Text Selection Using jQuery

Here,

We will use the concept of jQuery to disable text selection on HTML web page.

<!DOCTYPE html>
<html>
<head>
   <title>How To Disable Text Selection on Html Web page Using jQuery & CSS</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h3>How To Disable Text Selection on Html Web page Using jQuery & CSS</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">
        (function($){
            $.fn.disableSelection = function() {
                return this
                         .attr('unselectable', 'on')
                         .css('user-select', 'none')
                         .on('selectstart', false);
            };
        })(jQuery);
        
        $('body').disableSelection();
    </script>
</body>
</html>

We hope this article helped you to learn How To Disable Text Selection on Html Web page Using jQuery And CSS Tutorial in a very detailed way.

[do_widget “buy me a coffee”]

Online Web Tutor invites you to try Skillshare free for 1 month! Learn CakePHP 4, Laravel APIs Development, CodeIgniter 4, Node Js, etc into a depth level. Master the Coding Skills to Become an Expert in Web Development. So, Search your favourite course and enroll now. Click here to join.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.