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
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
