CODEWITHSUNDEEP
javascriptjqueryangularjs
Kaja
Kaja

Reputation: 161

Disable Cut, Copy and Paste function for textbox using AngularJs

I want to disable copy paste in a textarea using angularJs. I tried to do so with ng-paste, like so:

Controller:

  angular.module('inputExample', [])
  .controller('ExampleController', ['$scope', function($scope) {

  $scope.val = '1';
  $scope.past = function() {

    console.log("d");
    $scope.val ="  ";

  }
}]);

HTML:

<input ng-paste="past()" ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />

Input box has old data ( the initial paste data).

Blocking paste works the second time around, that is if I paste the data into input box, the data will be present, but on a second paste the data won't paste, but the old data value is not removed.

Upvotes: 14

Views: 28040

Answers (4)

ismaestro
ismaestro

Reputation: 8267

The simplest way:

<input ng-paste="$event.preventDefault();" placeholder='You cannot past here'>

Working here

Upvotes: 21

quw
quw

Reputation: 2854

Try making a directive that listens fot the cut, copy, and paste events and then prevent the default event action.

app.directive('stopccp', function(){
    return {
        scope: {},
        link:function(scope,element){
            element.on('cut copy paste', function (event) {
              event.preventDefault();
            });
        }
    };
});

Use by adding the attribute to the input box.

<input stopccp ng-model="val" />

Plunker

You could also use the ng-copy, ng-cut and ng-paste directives and directly cancel the event.

<input ng-cut="$event.preventDefault()" ng-copy="$event.preventDefault()" ng-paste="$event.preventDefault()" ng-model="val" />

Plunker

Upvotes: 32

Mehmet Otkun
Mehmet Otkun

Reputation: 1384

Try this;

 <input type="text" ng-paste="paste($event)" ng-model="name"/>

In Controller

 app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.paste = function(e){
       e.preventDefault();
       return false
    }
 });

Upvotes: 2

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

you can do like this

app.controller('MainCtrl', function($scope, $timeout) {....
.......
$scope.past = function() {
   $timeout(function() {
      $scope.val = " ";
   }, 0);
}...

here is the Demo Plunker

Upvotes: 0

Related Questions