Post
Ask Question

Prevent Cut, Copy, Paste & Drop In A Form Using jQuery

In this blog, we will learn how to disable cut, copy, paste, and drop in a form, using jQuery.
 
Suppose, we have a contact form as below.
  1. <div id="contactform">  
  2.     <div>  
  3.         <span>Name :</span>  
  4.         <input type="text" id="txtname" /></div>  
  5.     <div>  
  6.         <span>Email :</span>  
  7.         <input type="text" id="txtemail" /></div>  
  8.     <div>  
  9.         <span>Mobile :</span>  
  10.         <input type="text" id="txtmobile" /></div>  
  11.     <div>  
  12.         <span>Address :</span>  
  13.         <textarea id="txtaddress" rows="5" cols="5"></textarea></div>  
  14. </div>  
It will look like the below form when viewed in browser.
 
 
Now we need to disable copying, cutting, pasting, and dropping texts to/from the above form.
 
We can accomplish that using simple jQuery script, as below.
  1. <script type="text/javascript">  
  2.     $(function () {  
  3.         //Selects all inputs inside our form div  
  4.         var inputarea = $("#contactform :input");  
  5.         inputarea.bind("cut", function () {  
  6.             return false;  
  7.         });  
  8.         inputarea.bind("copy", function () {  
  9.             return false;  
  10.         });  
  11.         inputarea.bind("paste", function () {  
  12.             return false;  
  13.         });  
  14.         inputarea.bind("drop", function () {  
  15.             return false;  
  16.         });  
  17.     });    
  18. </script>   
Now, we can try copying, cutting, pasting or dropping texts to the above form. None of them will work.
 
Hope this will be helpful! 
Next Recommended Reading Prevent Browser Back and Forward Button using JQuery