Disable the options of Cut Copy Paste using Angular JS in HTML
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to disable the options of Cut, Copy and Paste in the TextBox by using Angular JS in HTML.
This article will help to learn how you can disable Cut, Copy and Paste operations or options using both (CTRL +C), (CTRL+X), (CTRL +V) and also using Mouse Right Click.
For more Update Please follow us on our Whtsapp Channel
For more Update Please follow us on our Facebook Page
Code for HTML Page
On the HTML page there will be Two Controls, one is text box with the id named text_user for capturing text that will be entered by the user, and second is TextArea for or displaying multiline textbox. Both TextBox and TextArea have been assigned with a class attribute set to disable.
<input type="text" class="disable" id="text_user" />
<br />
<br />
<textarea class="disable" rows="5" cols="5"></textarea>
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.
Here I will assigned a Class named disabled to the TextBoxes and TextArea on the HTML page. Inside the Controller, all the components with class disabled are presented and for all the components like Cut, Copy and Paste event handlers are attached by using JavaScript. By using the preventDefault function inside the event handlers of Cut, Copy and Paste, the event is cancelled.
Now when user will tries to act or use Cut, Copy and Paste operations or options, then operation will be not performed.
The great thing of that using this code it not work only disables the Cut, Copy and Paste options with CTRL button but it will also disables it on Mouse Right Click without disabling Right Click functionality.
<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>
Now Here i am giving complete code for the HTML page. You can copy and paste the whole code on your HTML page. And enjoy the execution of the whole concept.
<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>
Conclusion: In above code, I explained that how to disable the options of Cut, Copy and Paste in the TextBox by using Angular JS in HTML. 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