Disable Cut Copy and Paste in Javascript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain how to disable or prevent Cut, Copy and Paste functions or options in TextBox and TextArea by using in HTML.
This article will explain that how to disable Cut, Copy and Paste options using both CTRL + (C+X+V) and Mouse Right Click.
On HTML page there will be two controls one is Textbox for entering Text. Other one is TextArea for displaying multiline textbox. Here we will set class attribute set to disable for both controls TextBox and TextArea. You can see code below:-
<input type="text" class="disable" />
<br />
<br />
<textarea class="disable" rows="5" cols="5"></textarea>
JavaScript function for Disable the Cut Copy and Paste in TextBox and TextArea
window.onload event handler window.onload inside the JavaScript function, all the elements are referenced. Then, an object of Regular Expression is created which accepts an expression that matches with the class name set earlier in HTML INPUT TextBox and TextArea elements.
A FOR loop will work over the referenced elements and a check is performed whether the class name matches with the Regular Expression. If it matches then the copy, paste and cut events are attached to that element using AttachEvent JavaScript function.
AttachEvent
Inside the AttachEvent JavaScript function, a check is performed whether the element support addEventListener method or not. If supports, then the addEventListener is called which accepts name of the event with calling preventDefault() as parameter.
preventDefault
The preventDefault function cancels the default behavior or actions of that belong to the event. And if the addEventListener does not exists in the element then it will check for the attachEvent method and attachEvent is assigned to the element inside which the FALSE is returned.
Here I am giving complete code for HTML page with javascript functions as well as controls. You need to copy and paste the code in your HTML page for enjoying the code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CS" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function () {
var element = document.getElementsByTagName("*");
var regEx = new RegExp("(^| )disable( |$)");
for (var i = 0; i < element.length; i++) {
if (regEx.test(element[i].className)) {
AttachEvent(element[i], "copy");
AttachEvent(element[i], "paste");
AttachEvent(element[i], "cut");
}
}
};
function AttachEvent(element, eventName) {
if (element.addEventListener) {
element.addEventListener(eventName, function (e) { e.preventDefault(); }, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, function () { return false; });
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" CssClass="disable"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" CssClass="disable"></asp:TextBox>
</form>
</body>
</html>
Conclusion: In above code, I have been explained that how how to disable or prevent Cut, Copy and Paste functions or options in TextBox and TextArea by using in HTML. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment