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

Question

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

我有意见

<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）

好像看到了

angular 文档向页面发出警告，但它不限制输入我更喜欢不允许输入超过 4 个字符，并且只允许输入 alpha
所有这些指令解决方案对我来说似乎很疯狂
我可以做任何内联正则表达式吗？

Answer 1

如评论中所述，最好的方法是使用指令。其实我只是做了一个，你可以在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

支持

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

Limit characters in input box to non-numbers only with Angular

html

regex

angularjs

angularjs-directive

ng-maxlength