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!