In this article I will explain with an example, how to disable Cut, Copy and Paste in TextBox or TextArea using AngularJS.
Cut, Copy and Paste operations in TextBox or TextArea can be performed using CTRL button or using Mouse Right Click.
This article will illustrate how to disable Cut, Copy and Paste operations using both CTRL button and Mouse Right Click.
Disable Cut, Copy and Paste in TextBox using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML TextBoxes and TextArea element are assigned a Class named disabled.
Inside the Controller, all the elements with class disabled are referenced and for each element, Cut, Copy and Paste event handlers are attached using JavaScript.
Inside the Cut, Copy and Paste event handlers, the event is cancelled using the preventDefault function.
Now whenever user tries to perform Cut, Copy and Paste operations, the operation is not performed.
The best part of this snippet it not only disables the Cut, Copy and Paste operations with CTRL button but also disables it on Mouse Right Click without disabling Right Click functionality.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.AttachEvent = function (control, eventName) {
if (control.addEventListener) {
control.addEventListener(eventName, function (e) { e.preventDefault(); }, false);
} else if (control.attachEvent) {
control.attachEvent('on' + eventName, function () { return false; });
}
};
var controls = document.getElementsByTagName("*");
var regEx = new RegExp("(^| )disable( |$)");
for (var i = 0; i < controls.length; i++) {
if (regEx.test(controls[i].className)) {
$scope.AttachEvent(controls[i], "copy");
$scope.AttachEvent(controls[i], "paste");
$scope.AttachEvent(controls[i], "cut");
}
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="text" class="disable" /><br />
<br />
<textarea class="disable" rows="5" cols="5"></textarea>
</div>
</body>
</html>
Screenshot
![Disable Cut, Copy and Paste in TextBox using AngularJS]()
Browser Compatibility
The
above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
