Disable right click, copy, cut on web page using jQuery

On some website, you may notice that you can’t use right click, copy or cut content from the web page. Actually, on that websites, mouse right click and copy is disabled using JavaScript.

Here in this post, at first we are going to see how to disable right click on a web page. After that, we will see how to disable copy and cut content on the web page.

Simple Animation Example Using jQuery

How to get value from input box in JavaScript?

In this tutorial, we are going to use jQuery. It is a JavaScript framework that is used by lots of popular websites.

Disable right click on a web page

To disable right click on a web page using jQuery, we are going to use the contextmenu event handler. Inside this, we are going to return false. We also have to choose the selector where we want to disable the right click. You can choose the tag, id or class where you want to disable right click.

In this example, we are going to disable right click on the whole HTML page. So we are going to choose “html” as the selector. Below is the simple jQuery code that will disable right click for the whole page:



  $("html").on("contextmenu",function(e){
       return false;
   });

If you want to disable right click on a particular div element, then you have to put the id or class of the div element instead of “html” tag that we have used here.

CSS Moving Background Image Animation – CSS3 Source Code

Disable copy and cut on web page using jQuery

Now we are going to see how to disable copy and cut text or any other content that is on a web page. Below is the simple jQuery code which will disable cut and copy from a web page:

 $('html').bind('cut copy', function (event) {
     event.preventDefault();
 });

In this example also we have used the complete HTML page as the selector. Here we have attached a handler to an event for the elements by using bind method. Here the events are the cut and copy. The e.preventDefault() method is preventing from triggering the default action of the event.


That’s it. We have seen how to disable mouse right click, cut and copy from a web page in this tutorial.

2 responses to “Disable right click, copy, cut on web page using jQuery”

  1. Hi,

    Thanks for this article. At my blog, sometime I prefer to share code snippets in some articles. That’s why, I would like to enable copy-paste block for normal texts, except for pre, and code HTML elements. I would really appreciate if there will be an easy way to achieve.

    Thanks

  2. nithish podduturi says:

    Hi, Can we disable right click on PDF, so that user can restrict save as and print the document through JavaScript or Jquery

Leave a Reply

Your email address will not be published. Required fields are marked *