LaravelCode

Search

Disable Text Selection In WebPage Using jQuery and CSS

jQuery
2731 views 2 years ago
post-title

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.

Random Articles
Advertise