Input type NUMBER does not consider maxlength

Question

I have the following HTML:

<input ng-model="idade" type="number" maxlength="3" placeholder="Informe a idade">

When I go to test, the input ignores the maxlength and lets you type as many characters as you want. Strangely, when I change the type to tel it works.

Someone’s been through it and they’ve solved it???

Answer 1

According to the MDN documentation, you can only use the maxlength for the guys text, email, search, password, tel, or url.

That was a design decision.

If you wish, you can use the min and max attributes to validate numbers. (remembering that this validation, by default, will be performed in Ubmit and not at the time of typing).

Answer 2

You can include a "mask" in the event keydown of input. Something like:

document.getElementById("numero").addEventListener('keydown', function(event) {

  if (this.value.length == 3 && event.keyCode != 8) {
    event.preventDefault();
    return false;
  }

});

function soNumeros(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if (evt.keyCode)
    return true;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

<input id="numero" ng-model="idade" type="number" maxlength="3" placeholder="Informe a idade" onkeypress='soNumeros(event)'>

Answer 3

You can use your own Angular to create a directive:

var app = angular.module("app", []);

app.directive('ngMax', function() {
  return function(scope, element, attrs) {
    angular.element(element).on("keypress keydown", function(e) 
    { 
      if (e.keyCode != 8 && this.value.length == attrs.ngMax) 
      {  
         e.preventDefault();
         return false;
      }
    });
  };
});

app.controller("ctrl", ["$scope",
  function($scope) {

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <input ng-model="idade" 
         type="number"
         ng-maxlength="3" 
         ng-max="3" />
</div>

Was created the Directive ngMax which can be used with the maximum number configuration.

Answer 4

The directive could be improved by allowing you to navigate within the field and also to be erased from any position.

app.directive('ngMax', function() {
    return function(scope, element, attrs) {
        angular.element(element).on("keypress keydown", function(e) { 
            if (e.keyCode != 8 &&
                e.keyCode != 9 &&
                e.keyCode != 35 &&
                e.keyCode != 36 &&
                e.keyCode != 37 &&
                e.keyCode != 39 &&
                e.keyCode != 46 &&
                this.value.length == attrs.ngMax
            ) {
                e.preventDefault();
                return false;
            }
        });
    };
});