How to Disable Print screen, Cut, Copy, Paste, right-click and Text Selection on a Website

: Category: jQuery, HTML, CSS, JavaScript

Well, here are steps you have to follow to achieve this functionality, you will find that it is quiet easy trick once you recognize the code.

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.

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

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.

<!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.

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

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

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

To Disable Screen capture

Try to include this before closing on your website between script tags.

/** TO DISABLE SCREEN CAPTURE **/
document.addEventListener('keyup', (e) => {
    if (e.key == 'PrintScreen') {
        navigator.clipboard.writeText('');
        alert('Screenshots disabled!');
    }
});

/** TO DISABLE PRINTS WHIT CTRL+P **/
document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key == 'p') {
        alert('This section is not allowed to print or export to PDF');
        e.cancelBubble = true;
        e.preventDefault();
        e.stopImmediatePropagation();
    }
});

That's all. I hope you enjoyed this tutorial. And it can be useful for your website as well.

Name
Email