Как вы можете ограничить значение из ввода с помощью AngularJS?

Ответ 1

Всегда можно сделать для него директиву:

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX">

Ответ 2

Вы всегда можете использовать ng-minlength, ng-maxlength для длины строки и min, max для ограничения количества. Попробуйте это

<input type="number" 
       name="input"
       class="form-control input-lg"
       ng-model="search.main" 
       placeholder="enter first 4 digits: 09XX"
       ng-minlength="1" 
       ng-maxlength="4" 
       min="1" 
       max="9999">

DEMO FIDDLE

Ответ 3

Я использовал принятый ответ как точку запуска, но это то, что я придумал.

angular.module('beastTimerApp')
  .directive('awLimitLength', function () {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      attrs.$set("ngTrim", "false");
      var limitLength = parseInt(attrs.awLimitLength, 10);// console.log(attrs);
      scope.$watch(attrs.ngModel, function(newValue) {
        if(ngModel.$viewValue.length>limitLength){
          ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
          ngModel.$render();
        }
      });
    }
  };
});

Использование

<input name="name" type="text"  ng-model="nameVar" aw-limit-length="10"/>

Ключ должен использовать $setViewValue() и $render() для установки и отображения изменений соответственно. Это позволит убедиться, что значения $viewValue и $modelValue верны и отображаются правильно. Вы также хотите установить ngTrim на false, чтобы пользователь не добавлял лишние пробелы. Этот ответ является объединением ответа @tymeJV и этого сообщения в блоге... https://justforchangesake.wordpress.com/2015/01/10/useful-angularjs-directives/

Ответ 4

Будет делать это, позволяя выполнять обратные пробелы и удалять.

app.directive("limitTo", [function() {
    return {
    restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keydown", function() {
                if(event.keyCode > 47 && event.keyCode < 127) {
                    if (this.value.length == limit) 
                        return false;
                }   
            }); 
        }
    }
}]);

Ответ 5

вы можете использовать этот код:

<input type="number" class="form-control input-lg" 
       ng-model="search.main" 
       ng-keypress="limitKeypress($event,search.main,4)"
       placeholder="enter first 4 digits: 09XX">

и код AngularJS:

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

Ответ 6

Вместо этого можно использовать ng-значение:

ng-value="(minutes > 60 ? minutes = 0 : minutes)"

В html-коде:

<input type="text" class="form-control" ng-model="minutes" ng-maxlength="2" ng-pattern="/^[0-9]*$/" ng-value="(minutes > 60 ? minutes = 0 : minutes)"/>

Это проверит значение и, если оно больше 60, оно заменяет значение 0.

Ответ 7

Не нужно использовать директиву AngularJS.

Просто используйте хороший старый стандартный атрибут html maxlength.

<input type="text" maxlength="30" />

Ответ 8

Как есть проблема в приведенной выше директиве (ответ tymeJV). Если вы введете максимальную длину один раз, то он не примет никакого другого символа даже в обратном пространстве. То есть, если limit-to = "4", и если вы ввели 4 символа в поле ввода, вы не сможете его удалить. Итак, вот обновленный ответ.

app.directive("limitTo", [function () {
        return {
            restrict: "A",
            link: function (scope, elem, attrs) {
                var limit = parseInt(attrs.limitTo);
                elem.bind('keypress', function (e) {
//                    console.log(e.charCode)
                    if (elem[0].value.length >= limit) {
                        console.log(e.charCode)
                        e.preventDefault();
                        return false;
                    }
                });
            }
        }
    }]);

Ответ 9

Мы можем написать директиву для прослушивания события keypress. Но для некоторых старых браузеров это событие не запускается. Вот почему я создал директиву таким образом, чтобы не было зависимости от ограничения конкретных событий браузера. Я создал директиву angular, чтобы ограничить количество текста в поле ввода.

'use strict';
angular.module("appName")
.directive("limitTo", [function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, elem, attrs, ctrl) {
    var limit = parseInt(attrs.limitTo);
    ctrl.$parsers.push(function (value) {
        if (value.length > limit){
            value = value.substr(0, limit);
            ctrl.$setViewValue(value);
            ctrl.$render();
        }
        return value;
    });
 }
}}]);

Использование: <input limit-to="3" ng-model="test"/> допускает только 3 символа в поле ввода.

Ответ 10

Запустите эту операцию при любом изменении номера:

var log = Math.log(number) / Math.log(10);
if (log >= 4)
   number = Math.floor(number / Math.pow(10, Math.ceil(log - 4)));

Это всегда будет ограничивать "число" до 4 цифр.

Ответ 11

Angular материал имеет директиву mdMaxlength, если вы хотите отрезать вход на этой длине, вы можете использовать эту директиву:

 app.directive("forceMaxlength", [function() {
   return {
     restrict: "A",
     link: function(scope, elem, attrs) {
       var limit = parseInt(attrs.mdMaxlength);
       angular.element(elem).on("keydown", function() {
         if (this.value.length >= limit) {
           this.value = this.value.substr(0,limit-1);
           return false;
         }
       });
     }
   }
 }]);

Использование:

<input type="text" md-maxlength="30" force-maxlength=""/>

Ответ 12

Я повторяю, что сказал @Данило Кобольд.

Мне нужно было убедиться, что пользователи могут вводить только числа (0-9) [Без 'e' или '.' или '-'] и предел только 4 значения.

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            var exclude = /Backspace|Enter/;
            angular.element(elem).on("keydown", function(e) {
                if (event.keyCode > 47 && event.keyCode < 58) {
                    if (this.value.length == limit) e.preventDefault();
                } else if (!exclude.test(event.key)) {
                    e.preventDefault();
                }
            });
        }
    }
}]);

Если вы хотите использовать только ограничение, используйте

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            var exclude = /Backspace|Enter/;
            angular.element(elem).on("keydown", function(e) {
                if (!exclude.test(event.key)) {
                    if (this.value.length == limit) e.preventDefault();
                }
            });
        }
    }
}]);

Вы можете добавить дополнительные ключи, если хотите переменную exclude, например:

var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;

Получил идею из этого сообщения

Надеюсь, я помог кому-то.

Ответ 13

Вы можете просто использовать

ui-mask="9999"

в качестве атрибута в вашем представлении.

Ответ 14

**

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            var exclude = /Backspace|Enter/;
            angular.element(elem).on("keydown", function(e) {
                if (e.keyCode > 47 && e.keyCode < 58) {
                    if (this.value.length == limit) e.preventDefault();
                } else if (!exclude.test(e.key)) {
                    e.preventDefault();
                }
            });
        }
    }
}]);

**