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 are 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 do 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 
KHTML browsers (Konqueror): -khtml-user-select

Info

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>

Try it Yourself »

Info

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 onselectstart, oncopy, oncut, and onpaste Events to the <body> or <div> tags to prevent text selection and copy/cut on your website. This overrides the default behavior of the browsers.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body 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>

Try it Yourself »

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>

Try it Yourself »

The same effect can be achieved by using the jQuery on() method to handle the 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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <h2>Copy and cut disabled</h2>
    <p>I am a text and you cannot copy or cut me.</p>
    <script>
      $(document).ready(function() {
          $('body').on('cut copy', function(e) {
              e.preventDefault();
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

How to Disable Right-click with JavaScript/jQuery

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

Use the on() 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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <h2>Right-click disabled</h2>
    <p>For this page the right-click is disabled.</p>
    <script>
      $(document).ready(function() {
          $("body").on("contextmenu", function(e) {
              return false;
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

Tip

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.