仅使用 Angular 将输入框中的字符限制为非数字答案

【问题标题】：Limit characters in input box to non-numbers only with Angular仅使用 Angular 将输入框中的字符限制为非数字
【发布时间】：2017-03-28 23:04:01
【问题描述】：

我看到很多人都在使用指令来解决这个我觉得很烦人的问题。虽然我喜欢指令，但感觉有点矫枉过正。

我有意见

<input maxlength="4" type="text" id="CustomerNameKey" name="CustomerNameKey" class="form-control" ng-model="detail.customerNameKey" placeholder="Customer Name Key" required />

我认为业务需求仅限于 4 个字母数字，所以这段代码很好用

maxlength="4"

但是我不能允许任何数字（所以只允许 a-z / A-Z）

好像看到了

带有向页面发出警告的角度文档，但它不限制输入
所有这些指令性解决方案对我来说似乎很疯狂
我可以做任何内联正则表达式吗？

【问题讨论】：

<input maxlength="4" onkeyup="this.value = this.value.replace(/[^a-zA-Z]/g, '')" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '')">怎么样
我会咬紧牙关，用棱角分明的“当在罗马......”做一个指令，这是一个不错的stackoverflow.com/questions/28230080/…
如果你不喜欢指令，这可能意味着你对它们不够熟悉或不够熟悉。一旦你理解了它们，它们就很容易编写和直观。值得付出努力，尤其是对于这样一个简单的问题

标签： html angularjs regex angularjs-directive ng-maxlength

【解决方案1】：

如 cmets 中所述，最好的方法是使用指令。其实我只是做了一个，你可以在jsFiddle中看到

myApp.directive('smartInput', [
  function() {
    return {
      restrict: 'E',
      scope: {
        value: '='
      },
      link: function(scope, element) {
        element.bind('keypress', function(event) {
          if (event.key.search(/\d/g) != -1) {
            event.preventDefault();
          }
        });
      },
      template: '<input type="text" ng-model="value">'
    }
  }
]);

http://jsfiddle.net/HB7LU/28432/

编辑：

HTML5 支持通过使用pattern 属性对html input 元素进行输入检查，尽管它不会实时响应并且必须与提交一起使用。如果这是您正在寻找的功能，您可以使用一个简单的元素：

<input type="text" name="charInput" pattern="[A-Za-z]" title="Not Numbers">

更多信息请访问w3 page on the pattern attribute。同样值得注意的是，safari 似乎不支持这一点

【讨论】：