Hariom
Prajapati
25 Jun 2022
JQueryIn this tutorial we will learn how to disable text selection on webpage using CSS, Jquery and Jquery ui one by one.
1) How to disable text selection using CSS
we will use some CSS code on body tag to disable text selection on webpage.
Just use below code to disable text selection on webpage using CSS (cascading style sheet).
<!DOCTYPE html>
<html>
<head>
<title>How to disable text selection using CSS</title>
<style type="text/css">
body {
user-select: none;
/* It is supported by Chrome and Opera */
-webkit-user-select: none;
/* It is supported by Safari */
-khtml-user-select: none;
/* It is supported by Konqueror HTML */
-moz-user-select: none;
/* It is supported by Firefox */
-ms-user-select: none;
/* It is supported by Internet Explorer/Edge */
}
</style>
</head>
<body>
<h3>How to disable text selection using CSS</h3>
<p>In this tutorial we will see that how to disable text selection using css.</p>
<p>Teknowize - we provide many free course from basic to advance level.We make tutorials of all the Programming and
Scripting languages to help for free.</p>
</body>
</html>2) How to disable text selection using Jquery
Here we create custom disableSelection() jqurey function and this function will use on body tag.
Just use below code to disable text selection on webpage using Jquery.
<!DOCTYPE html>
<html>
<head>
<title>How to disable text selection using Jquery</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<h3>How to disable text selection using Jquery</h3>
<p>In this tutorial we will see that how to disable text selection using Jquery.</p>
<p>Teknowize - we provide many free course from basic to advance level.We make tutorials of all the Programming and
Scripting languages to help for free.</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>3) How to disable text selection using Jquery ui
We all know that Jquery ui provide many amazing function. So, here disableSelection() will be use for disable text selection.
Just use below code to disable text selection on webpage using Jquery ui.
<!DOCTYPE html>
<html>
<head>
<title>How to disable text selection using Jquery ui</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>How to disable text selection using Jquery ui</h3>
<p>In this tutorial we will see that how to disable text selection using Jquery ui.</p>
<p>Teknowize - we provide many free course from basic to advance level.We make tutorials of all the Programming and
Scripting languages to help for free.</p>
<script type="text/javascript">
$('body').disableSelection();
</script>
</body>
</html>