Prevent user from entering extra characters when reaching maximum length

Question

Using angularjs, I am not satisfied with the tag ng-maxlength. I want the input field to block the user from entering extra characters when hitting the maximum length. So instead, ng-maxlengthI tried to write a directive that would check the input when the keydown / keypress key was pressed:

.directive('vldMaxLength', function() {
  return function (scope, element, attr) {
    element.bind('keydown keypress', function (event) {
      if(event.target.value.length >= 10 && (event.which !== 8 && event.which !== 46)) {
        event.preventDefault();
      }
    });
  };
})

This works decently, but the user cannot select part of the string and replace it with different characters. Maybe there is something that I can add to the directive to allow this? Or maybe there is an easier way to get this functionality, rather than using a directive.

JSFiddle: http://jsfiddle.net/DwKZh/147/

Answer 1

HTML-:

<form action="demo_form.asp">
  Username: <input type="text" name="usrname" maxlength="10"><br>
  <input type="submit" value="Submit">
</form>