使用 AngularJs 禁用文本框的剪切、复制和粘贴功能 [英] Disable Cut, Copy and Paste function for textbox using AngularJs

问题描述

我想使用 angularJs 禁用文本区域中的复制粘贴.我尝试使用 ng-paste 这样做，如下所示:

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

控制器:

  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.

推荐答案

尝试制作一个指令来监听 cut、copy 和 paste 事件，然后阻止默认事件操作.

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

您也可以使用 ng-copy、ng-cut 和 ng-paste 指令直接取消事件.

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

这篇关于使用 AngularJs 禁用文本框的剪切、复制和粘贴功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！