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

Question

问题更新：如何防止使用 AngularJS（或 jQuery）将除 char 数组中指定的字符之外的所有字符输入到输入字段中？

---

老问题：

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

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

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

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

1. 我使用什么正则表达式模式将字符集限制为我上面发布的字符集？
2. 如何防止在字段中输入非法字符？ （例如，如果您输入一个小写字母，那么它将不会出现在该字段的开头，同样，如果您尝试粘贴包含任何非法字符的文本，它们将立即被删除）

Answer 1

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

#plnk会更清楚！

Answer 2

为了“限制输入某些字符”，我想到的是在输入上附加“keyup”、“change”、“paste”事件的事件处理程序，以及当它们被触发以“清除”它们的值时你的模式。我将逻辑实现为 jQuery 插件，但您可以将其调整为 angular、使用更好的命名或任何您想要的。

插件：

$.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

Angular 的方法是利用 Angular 的 ngModelController.$parsers 参见documentation:

$解析器

作为管道执行的函数数组，无论何时 控件从 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 的回答。

您显然也可以扩展此指令以获取输入参数。我会把它留给你的练习。