More

How to disable text selection using CSS, Jquery and Jquery ui

 

In 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>

Related Topics

×

TOP TOPICS

Road map for web development 2022 What is git and git hub How to create a Google logo using HTML and CSS What is .htaccess file and how to use it Most important HTML5 interview questions PHP CRUD operations How to send mail using PHP Insert and fetch image using PHP How to dowload pdf using PHP How to export data in Excel using Laravel Import excel data in database using laravel How to send mail in Laravel 8 Laravel 8 CRUD Operation Laravel 8 Image Upload and Fetch Tutorial Example Laravel 8 CRUD operation using DB Laravel 8 CRUD Operation using resource controller Date Validations Using jquery Datepicker How to reset or clear a form using JavaScript Form validation in Laravel 8 How to download pdf file using Laravel 8 dompdf How to Toggle Password Visibility Using JavaScript PHP CRUD Operation Using Ajax and Jquery Get Yesterday and Tomorrow Date in PHP How to disable text selection using CSS and Jquery How to Get Previous Month and Next month date from Date in PHP Laravel CRUD Operation Using Ajax and Jquery How to find numbers from string in PHP How to Convert String Date to Date Format in PHP How to calculate age from dob column using mysql Rotate image using JQuery animate() method Allow Only Numbers in a Text Box using jQuery How To connect SSH using PHP? Radio buttons value using GET method in PHP How to get X and Y position on click event using jQuery Delete Confirmation Message using JavaScript Select2 DropDown With Validation using Bootstrap 4 How to Zoom an Image on Mouse Hover using CSS How to Remove First Element from Array in PHP How to Remove Last Element from Array in PHP E-Signature Pad using jQuery, Ajax and PHP PHP Contact Form with Google reCAPTCHA How to update profile image in Laravel using Ajax How to get X and Y position of an element using jQuery How to disable a anchor tag in HTML using CSS, JS and jQuery check if atleast one checkbox is checked or not using jQuery How can we count number of rows in a table using jQuery How can we count child elements inside a div using jQuery How to use radio button on change event in jQuery How to get checked radio button value by name using jQuery How to count the number of character in a string using jQuery How to add modal popup in PHP using jQuery?