旧问题：

我的AngularJS应用程序中有一个简单的<input type="text" />字段，我希望用户只能在字段中输入以下字符：

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~

我知道我可以将ng-pattern="allowed"添加到<input>，然后将$scope.allowed设置为某个正则表达式模式，如果输入了任何无效字符，则会将输入标记为无效，但我也是想要防止受限制的字符输入到所有字段中。

所以我的问题由两个问题组成：

我使用什么正则表达式将字符集限制为我在上面发布的字符集？
如何防止非法字符进入字段？（例如，如果您键入小写字母，那么它将不会出现在字段中，类似地，如果您尝试粘贴包含任何非法字符的文本，则会立即将其删除）

Answer 1

Angular方法是使用Angular的ngModelController。$ parsers参见documentation：

$ parsers

每当执行时作为管道执行的函数数组   控件从DOM读取值。反过来，每个函数被调用   将值传递给下一个。使用最后一个返回值   填充模型。用于消毒/转换价值以及   验证。对于验证，解析器应更新有效性   使用$ setValidity（）进行状态，并为无效值返回undefined。

以下是使用此方法的可重用指令的示例：

app.directive('inputRestrictor', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attr, ngModelCtrl) {
        var pattern = /[^0-9A-Z !\\"#$%&'()*+,\-.\/:;<=>?@\[\]^_`{|}~]*/g;

        function fromUser(text) {
          if (!text)
            return text;

          var transformedInput = text.replace(pattern, '');
          if (transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
          }
          return transformedInput;
        }
        ngModelCtrl.$parsers.push(fromUser);
      }
    };
  }
]);

这是plnkr demo。

*上述指令的正则表达式取自Viktor Bahtev的回答。

显然，您可以扩展此指令以获取输入参数。我会留下你的exersize。

Answer 2

要限制某些字符输入＆＃39;我想到的是为＃key;＆＃39;更改＆＃39;，＆＃39;粘贴＆＃39;附加事件处理程序。关于投入的事件以及何时被触发以清理＆＃39;他们的价值观与你的模式。我将逻辑实现为jQuery插件，但您可以将其调整为角度，使用更好的命名或任何您想要的。

插件：

$.fn.restrictInputs = function(restrictPattern){
    var targets = $(this);

    // The characters inside this pattern are accepted
    // and everything else will be 'cleaned'
    // For example 'ABCdEfGhI5' become 'ABCEGI5'
    var pattern = restrictPattern || 
        /[^0-9A-Z !\\"#$%&'()*+,\-.\/:;<=>?@\[\]^_`{|}~]*/g; // default pattern

    var restrictHandler = function(){
        var val = $(this).val();
        var newVal = val.replace(pattern, '');

        // This condition is to prevent selection and keyboard navigation issues
        if (val !== newVal) {
            $(this).val(newVal);
        }
    };

    targets.on('keyup', restrictHandler);
    targets.on('paste', restrictHandler);
    targets.on('change', restrictHandler);
};

用法：

$('input').restrictInputs();

// Or ...

$('.my-special-inputs-decorated-with-this-class').restrictInputs();

这是JsFiddle Demo

注意：您可以尝试将实现更改为接受带有禁用字符的字符串而不是正则表达式，并动态创建正则表达式。此外，您可能会发现其他适合触发“清洁”的活动。

Answer 3

尝试使用regExp通过传递$ event来过滤ng-keypress上不必要的字符。

# plnk会更清楚！

将输入字段中的字符限制为一组字符

旧问题：

3 个答案: