How to disable Copy Paste in Input field

byKailash Chandra Behera -July 10, 2020

0

Introduction

This blog describes how to create an HTML form with sucrity by disabling copy cut paste command(Mouse right click,mouse drop, cut and paste, copy and paste) in the HTML form. Event you can't do copy, paste, cut, drop, and mouse right-clicks operation in TextBox control and page-level from mouse control.

Getting Started

Sometimes for security reasons, it is required to disable copy and paste or right click from mouse control on specific control like TextBox or Password control or on a whole page.

You might have seen, in banking applications and finance applications have been disabled the copy, paste, and mouse right-click operation on the web.

Using the HTML method and properties the operation copy, paste, drop, and mouse right-click can be prevented, you can override the feature like display custom message with JavaScript.

The oncopy, onpaste,oncut ,drop and oncontextmenu HTML methods are used to disable control keys for copy, paste, mouse drop, mouse right-click,cut and paste, copy cut paste on the page and TextBox . The above HTML attributes, you can use on a simple HTML page like below Example.

 <html xmlns="http://www.w3.org/1999/xhtml">   
  <head id="Head1" runat="server">   
   <title></title>   
  </head>   
 <body oncontextmenu ="return false">   
   <form id="form1" runat="server">   
   <div>   
    <input type="input" oncopy="return false" onpaste="return false" drop="return false"    
     oncut="return false" >   
   </div>   
   </form>   
  </body>   
  </html>

How to disable Copy Paste in Input field

Using the above code, you can prevent copy, paste, cut, drop, and mouse right-clicks feature on page level and control level in MVC. But you can't do any customization like display custom message. The below example describes how to prevent copy, paste, cut, drop, and mouse right-clicks using JavaScript which display messages on the execution of the above-mentioned operation.

 @model DisableCopyPastMVC.Models.User   
  @{   
   ViewBag.Title = "Index";   
  }   
  <h2>Index</h2>   
  @using (Html.BeginForm())   
  {   
   @Html.AntiForgeryToken()   
   @Html.ValidationSummary(true)   
   <fieldset>   
    <legend>User</legend>   
    <div class="editor-label">   
     @Html.LabelFor(model => model.FullNme)   
    </div>   
    <div class="editor-field">   
     @Html.TextBoxFor(model => model.FullNme, new { @class = "disable" })   
     @Html.ValidationMessageFor(model => model.FullNme)   
    </div>   
    <div class="editor-label">   
     @Html.LabelFor(model => model.UserID)   
    </div>   
    <div class="editor-field">   
     @Html.TextBoxFor(model => model.UserID)   
     @Html.ValidationMessageFor(model => model.UserID)   
    </div>   
    <p>   
     <input type="submit" value="Create" />   
    </p>   
   </fieldset>   
  }   
  <div>   
   @Html.ActionLink("Back to List", "Index")   
  </div>   
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
  @*<script language="javascript">   
   document.onmousedown=disableclick;   
   status="Right Click Disabled";   
   function disableclick(e)   
   {   
    if(event.button==2)   
    {   
     alert(status);   
     return false;      
    }   
   }   
  </script>*@   
  <script type="text/javascript">   
   $(function () {   
    $('#UserID').mousedown(function (event) {   
     if (event.which == 3) {   
      alert('Right Click disabled');   
      return false;   
     }   
    });   
   });   
  </script>   
  <script type="text/javascript">   
   $(function () {   
    var controls = $(".disable");   
    controls.bind("paste", function () {   
     alert(' Paste disabled');   
     return false;   
    });   
    controls.bind("drop", function () {   
     alert(' Drop disabled');   
     return false;   
    });   
    controls.bind("cut", function () {   
     alert(' Cut disabled');   
     return false;   
    });   
    controls.bind("copy", function () {   
     alert(' Copy disabled');   
     return false;   
    });   
   });   
  </script>

How to disable Copy Paste in Input field

Summary

Here in the above example, we saw how to create an html form by disabling copy paste in input file using JavaScript and HTML functions. I hope you have enjoyed it a lot.

Thanks

Tags javascript