Question

我使用Angular Directive编写了限制文本框中特殊字符的代码。任何人请告诉我，如何限制文本框中粘贴的特殊字符

这是我的代码：

checks.directive("restrictnosplcharacters", function() {
    "use strict";
    return {
        restrict: "A",
        scope: {},
        replace: false,
        link: function(scope, element, attrs, ctrl) {
            element.bind('keypress', function(event) {
                if (event.keyCode != 8 && event.keyCode != 116 && event.keyCode != 32) {
                    var regex = new RegExp("^[a-zA-Z.]+$");
                    debugger
                    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
                    if (!regex.test(key)) {
                        event.preventDefault();
                        return false;
                    }
                }
            });
        }
    };
});

Answer 1

没有理由重新发明轮子，AngularJS已经有ng-paste指令。您的指令可以将ng-paste注入元素，只需在粘贴的文本包含＆＃34;特殊字符＆＃34;时取消粘贴事件。它看起来像这样：

.directive('restrictnosplcharacters', function($compile) {
  return { 
    restrict : "A",
    controller: function($scope) {
      $scope.onPaste = function(e) {
        var text = e.clipboardData.getData('text/plain');
        if (!/^[a-zA-Z0-9- ]*$/.test(text)) {
          console.error('paste of "'+text+'" prevented')
          e.preventDefault()
        }  
      }  
    },   
    compile: function(cElement) {
      cElement.removeAttr('restrictnosplcharacters');
      return function(scope, element) {
        angular.element(element).attr('ng-paste', 'onPaste($event)');
        $compile(element)(scope)
      } 
    }    
  } 
});

现在您可以粘贴＆＃34;示例文本＆＃34;进入元素而不是＆＃34; sample @ text＆＃34;

演示 - ＆gt;的 http://plnkr.co/edit/sqtIondyFh80zPS2V4vF?p=preview

注意：浏览器可能存在不支持Clipboard API的问题。见this answer。

Answer 2

为此，我们无法限制粘贴事件，因为我们需要使用ng-paste。

我们需要为ng-paste编写单独的函数，在html中我们称这个函数为：

HTML：

在js文件中我们需要编写js函数

$scope.pasteOptions = function(event) {
        var clipboarddata = window.event.clipboardData.getData('text');
        var regex = new RegExp("^[a-zA-Z.]+$");
        var pastedData = window.event.clipboardData.getData('text/plain')
        if(pastedData.match(regex) === null) {
            event.preventDefault();
            return false;

        }
    };

Angularjs：限制粘贴事件的特殊字符

2 个答案: