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.
How to Disable Copy Paste in Input Field
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 event attributes can be used to disable control actions such as copy, paste, cut, mouse drop, and right-click on a webpage or within a TextBox
. These attributes can be used in a simple HTML page, as shown in the example below.
<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