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

Question

问题更新:如何使用AngularJS(或jQuery)将除char数组中指定的字符之外的所有字符都输入到输入字段中？

---

老问题:

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

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

我知道我可以添加ng-pattern="allowed"到<input>然后设置$scope.allowed为一些正则表达式模式,如果输入任何无效字符,将标记输入无效,但我还想防止受限制的字符输入到字段AT ALL.

所以我的问题包括两个问题:

1. 我使用什么正则表达式将字符集限制为我上面发布的那个？
2. 如何防止在现场输入非法字符？(例如,如果您键入小写字母,那么它将不会出现在字段中,类似地,如果您尝试粘贴包含任何非法字符的文本,它们将立即被删除)

Answer 1

Angular的方法是使用Angular的ngModelController.$ 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演示.

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

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

Answer 2

要"从被输入限制某些人物出现什么在我的脑海里是附加的事件处理程序"KEYUP","改变",在输入"粘贴"的事件,当他们被触发,以"干净"他们对你的格局值.我将逻辑实现为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演示

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

Answer 3

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

#在plnk中会更清楚！