Introduction
Sometimes for security reason, it is required to disable copy and paste or mouse right click for specific control like TextBox or Password control or whole page .
This blog describes how to disable copy, paste, cut, drop, and mouse right-clicks in TextBox control and page-level in MVC application.
Getting Started
You might have seen, banking online application and finance application has been a disabled copy, past, and mouse right-click event on the web.
This blog describes code examples in MVC application to achieve the above things. you can achieve this by using both HTML tags and JavaScript code.
HTML tags or properties only prevent copy, paste, drop and mouse right-click feature, but with JavaScript, you can override the feature like display custom message with the prevention of feature.
oncopy, onpaste,oncut ,drop and oncontextmenu HTML properties helps to disable copy,past, drop feutre and prevents mouse right click in the page and control level like TextBox. As above properties are HTML properties you can use in simple HTML page like below Example.
Example-1
In this example copy, past, cut and drop feature has been disabled for TextBox using simple HTML. <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<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>
Example-2
It prevents mouse right click in Page using simple HTML. <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>
Using the above code, you can prevent copy, paste, cut, drop, and mouse right-clicks feature in 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-click feature.
Example-3
In this example copy, paste, cut, drop feature is prevented in TextBox @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 = "input_box",
id = "txtFullNme",
oncopy="return false",
onpaste="return false",
oncut="return false",
ondrop="return false"
}
)
@Html.ValidationMessageFor(model => model.FullNme)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
Example-4
Mouse right feature is prevented in this example on page in MVC <div oncontextmenu="return false">
@model DisableCopyPastMVC.Models.User
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm("", "", "oncontextmenu='return false'"))
{
@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)
@Html.ValidationMessageFor(model => model.FullNme)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
</div>
As I mentioned above, copy, paste, cut, drop and Mouse right-click can be prevent using JavaScript with customization. The below examples describe how to implement the above interventions in MVC.
Example-5
This example has taken two TextBox controls to implement prevention of copy, paste, cut,drop and mouse right click feature in control level. It displays message on above occurrence. @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>
Example-6
Page level mouse right click prevention implemented in this example. @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)
@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>
Thanks
Tags
mvc