ни maxlenght, ни ng-maxlength, похоже, не работают angularjs

Question

У меня есть следующий ввод в моем html-файле:

 <input name="password" 
        id="newPasswordConfirmation" 
        ng-model="newPasswordConfirmation" 
        type="number" 
        inputmode="numeric" 
        placeholder="" 
        required 
        minlength="8" 
        maxlength="8" 
        autocomplete="off" 
        ng-maxlength="8" 
        autocorrect="off" 
        autocapitalize="off" 
        style="-webkit-text-security: disc; text-security: disc;"> 

Я хочу ограничить ввод до 8 алгоритмов, но когда я печатаю на своем мобильном устройстве (Android), я могу продолжать печатать мимо8 алгаризмов.Почему это не работает и как вы можете сделать это ограничение?

Answer 1

Демонстрационная скрипка

   <div ng-app="App" ng-controller="Ctrl">
       <input type="text"
           ng-model="model" 
           ng-keypress="limitKeypress($event, model, 8)"
           placeholder="enter first 8 digits">
    </div>

    angular.module('App', []).controller('Ctrl', Ctrl);

    function Ctrl($scope) {
        $scope.model = 'test'

        $scope.limitKeypress = function ($event, value, maxLength) {
            if (value != undefined && value.toString().length >= maxLength) {
                $event.preventDefault();
            }
        }

    }
    Ctrl.$inject = ['$scope'];

Answer 2

Как уже упоминалось в комментариях, maxlength не работает с вводом чисел.От MDN :

maxlength : если значением атрибута type является текст, электронная почта, поиск, пароль, телефон или URL, этот атрибут указываетмаксимальное количество символов (в единицах кода UTF-16), которое может ввести пользователь.Для других типов элементов управления он игнорируется.

Вот небольшая директива, которую вы можете использовать вместо:

angular.module('myApp').directive('maxLength', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var maxLength = attrs.maxLength || false;
      if (maxLength) element.on('keydown keypress keyup paste propertychange', function(e) {
        if (element[0].value.length >= maxLength - 1) {
          element[0].value = element[0].value.slice(0, maxLength)
        }
      })
    }
  }
});

<input type="number" max-length="8">