In this article I will explain with an example, how to disable or prevent Cut, Copy and Paste operations in TextBox and TextArea using
JavaScript in HTML.
This article will illustrate, how to disable Cut, Copy and Paste operations using both CTRL + (C+X+V) and Mouse Right Click.
HTML Markup
The following HTML Markup consists of:
TextBox – For capturing text.
TextArea – For displaying multiline textbox.
Both TextBox and TextArea have been assigned with a class attribute set to disable.
<input type="text" class="disable" />
<br />
<br />
<textarea class="disable" rows="5" cols="5"></textarea>
JavaScript for Disabling Cut Copy and Paste in TextBox and TextArea
Inside the
JavaScript window.onload event handler, all the elements are referenced.
Then, an object of
Regular Expression (RegExp) is created which accepts an expression that matches with the class name set earlier in HTML INPUT TextBox and TextArea elements..
A FOR loop is executed 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 checks for the attachEvent method and attachEvent is assigned to the element inside which the FALSE is returned.
<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>
Screenshot
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads