Disable Right click and cut copy paste with jQuery

With jQuery and javascript, it is possible to control the flow of the right click, cut, copy, and paste within the whole web page or from the particular section.

This type of functionality mainly found in the Test based web application where student not allowed to copy and paste content on the page.

Or displaying the custom context menu on right click.

Disable Right click and cut copy paste with jquery


Contents

  1. Disable Right click from the whole document
  2. Disable Right click from a particular element
  3. Disable cut, copy, and paste
  4. Conclusion

1. Disable Right click from the whole document

Bind contextmenu event on the document and return false when that event triggers.

In the example, I use setTimeout() function to display an error message when right click on the document.

You can either use return false or e.preventDefault() to disable the Right click. I used return false in the example.

$(document).bind('contextmenu', function (e) {
 
  $("#error").fadeIn("slow");
  setTimeout(function(){
   $("#error").fadeOut("slow");
  },2000);
  return false;
 
});

With JavaScript

<body oncontextmenu="return false"></body>

Output –

Right, click to see the changes.


2. Disable Right click from a particular element

Bind contextmenu event on an element from which you want to disable right-click.

Example –

Bind contextmenu event on a  <textarea id='address'>.

$(document).ready(function(){
  $("#address").bind('contextmenu', function (e) {
 
   $("#error").fadeIn("slow");
   setTimeout(function(){
    $("#error").fadeOut("slow");
   },2000);
 
   return false;
 
  });
 
});

Output –

Right, click on Address textarea.


3. Disable cut, copy, and paste

You have stop user from copying your content by disabling mouse right-click. But the user can also able to copy your content simply using keyboard shortcut keys.

For disabling this you need to bind cut copy paste event to the document or an element.

Example –

$('body').bind('cut copy paste', function (e) {
 $("#error").fadeIn("slow");
 setTimeout(function(){
  $("#error").fadeOut("slow");
 },2000);
 
 return false;
});

Output-

Try to copy text and paste text in textarea.


4. Conclusion

Using this you can stop the user from copying your content. But it is not the best way to protect your content from copying because it is JavaScript-based code which the user can disable from its browser or either copy content from view-source of the web page.

But it is somewhat better than allowing directly copying content.

Related Post

Spread the love

One Comment

  1. Nikhil Kamble said:

    Thanks…..

    May 18, 2017
    Reply

Leave a Reply

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