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.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
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
View Demo
 
 
Downloads
Download Code


Other available versions