How to Disable Text Selection, Copy, Cut, Paste and Right-click on a Web Page

There can be some cases when preventing certain parts of your web page from being selected could be profitable.

Because disabled user-selection is very annoying, you had better not set it for your whole website. Instead, disable text selection for the parts or on the specific articles that you afraid might be stolen. Use it in situations where it will enhance the UX of your website.

No matter what is the reason for disabling user-selection on your website, if you have come to that step, this is the right place to learn how to that with CSS, Javascript and jQuery easily.

How to Disable Text Selection Highlighting with CSS

It’s not a difficult task to make a text unselectable. All you need to do is to disable the text selectivity for all the browsers that your webpage is likely to be loaded on.

Let’s see what extensions to use for different browsers to disable the selectivity of a text.

  • Chrome, Opera (older versions), IOS Safari: -webkit-user-select
  • Safari: -webkit-touch-callout
  • Mozilla: -moz-user-select
  • Internet Explorer, Edge: -ms-user-select
  • KHTML browsers (Konqueror): -khtml-user-select

Chrome starting from 54.0 version and Opera starting from 41.0 version support the user-select without the-webkit- prefix.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .unselectable { 
      -webkit-user-select: none; 
      -webkit-touch-callout: none; 
      -moz-user-select: none; 
      -ms-user-select: none; 
      user-select: none;    
      color: #cc0000;
      } 
    </style>
  </head>
  <body>
    <p>I am a selectable text. You can select me.</p>
    <div class="unselectable">I am an unselectable text. My text selection is disabled.</div>
  </body>
</html>

If you need to disable text selection for the whole page, apply the user-select to the <body> element.

How to Disable Text Selection with JavaScript

Apply the onmousedown and onselectstart Events to the <body> or <div> tags to prevent text selection and copy/cut on your website. It override the default behavior of the browsers.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body onmousedown="return false" onselectstart="return false">
    <h2>Unselectable text</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

How to Disable Copy, Cut, and Paste with JavaScript/jQuery.

You can allow text selection, but prevent copy and cut functions using the oncopy, oncut and onpaste event attributes. By adding these attributes into a textbox’s <input> tag, you can disable cut, copy and paste features. The user is left with the option to enter the field manually with these attributes set.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Copy, cut and paste disabled</h2>
    <input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br>
  </body>
</html>

The same effect can be achieved by using the jQuery bind() function specifying cut and copy events that are fired when the user cuts or copies a text.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Copy and cut disabled</h2>
    <p>I am a text and you cannot copy or cut me.</p>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
          $('body').bind('cut copy', function (e) {
              e.preventDefault();
          });
      });
    </script>
  </body>
</html>

How to Disable Right-click with JavaScript/jQuery

To disable right-click on you page, you need to add the oncontextmenu event and "return false" in the event handler. It will block all the access to the context menu from mouse right-click.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Copy and cut disabled</h2>
    <p>I am a text and you cannot copy or cut me.</p>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
          $('body').bind('cut copy', function (e) {
              e.preventDefault();
          });
      });
    </script>
  </body>
</html>

Use the bind() jQuery function to disable the right-click feature.This method disables the right-click (context menu) feature on a text field, and also alerts the user with a popup message.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Right-click disabled</h2>
    <p>For this page the right-click is disabled.</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
          $("body").on("contextmenu",function(e){
              return false;
          });
      });
    </script>
  </body>
</html>

Remember that it is not possible to prevent text extraction in your document in any way (100 percent secure), for there are many ways to retrieve a website's content, i.e., the Browser Developers Console.


Do you find this helpful?

Related articles