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.
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.
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>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.
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>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.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to check whether a variable is set or not in PHP
Use the PHP isset() function...
How to create a new line in PHP
Use the Newline Characters '\n'...
How to check whether a variable is null in PHP
Use the PHP is_null() function...
How to remove white space from the beginning of a string in PHP
Use the PHP ltrim() function...
Build a Basic React App
In this article, we will share with you...