使用AngularJs禁用文本框的剪切,复制和粘贴功能

时间:2015-01-05 15:58:33

标签: javascript jquery angularjs

我想使用angularJs在textarea中禁用复制粘贴。我尝试使用ng-paste这样做:

控制器:

  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" />

输入框具有旧数据(初始粘贴数据)。

阻止粘贴第二次工作,也就是说,如果我将数据粘贴到输入框中,数据将会出现,但是在第二次粘贴时数据将不会粘贴,但是旧的数据值未被删除。

4 个答案:

答案 0 :(得分:29)

尝试制作一个监听cutcopypaste事件的指令,然后阻止默认事件操作。

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

通过将属性添加到输入框来使用。

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

Plunker

您还可以使用ng-copyng-cutng-paste指令直接取消活动。

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

Plunker

答案 1 :(得分:19)

最简单的方法:

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

工作here

答案 2 :(得分:2)

Try this;

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

在控制器

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

答案 3 :(得分:0)

你可以这样做

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

这是Demo Plunker