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

Question

I see that a lot of people are using directives to solve this problem which I find annoying. While I like directives it feels like massive overkill.

I have an input

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

I thought the business requirement was just limit to 4 alphanumeric , so this code works great

maxlength="4"

However I cannot allow any number ( so only allowing a-z / A-Z )

Seems like I see

1. angular documentation with it throwing out warning to the page, but it is not restricting the input I prefer to not allow more than 4 characters to be typed , and only alpha
2. all these directive solutions seem crazy to me
3. Any inline regex i can do?

Answer 1

As mentioned in the comments, the best approach is to use a directive. In fact, I just made one, you can see it in the 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/

EDIT:

HTML5 supports input checking in html input elements by use of the pattern attribute, although it does not respond in real time and must be used with a submit. If this is the functionality you are looking for, you can get away with a simple element:

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

more information can be found on the w3 page on the pattern attribute. Also noteworthy is the fact that this does not appear to be supported by safari