¿Cómo se puede limitar el valor de entrada usando AngularJS?

Estoy buscando formas de limitar el valor dentro de la entrada a 4 y procesar el valor de 4 dígitos en mi controlador.

 {{ search.main | limitTo:4}} 

Siempre puede hacer una directiva para ello:

 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(); }); } } }]);  

Siempre puede usar ng-minlength , ng-maxlength para la longitud de la cadena y min, max para los límites numéricos. Prueba esto

  

DEMO FIDDLE

Usé la respuesta aceptada como punto de partida, pero esto es lo que se me ocurrió.

 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(); } }); } }; }); 

uso

  

La clave es usar $ setViewValue () y $ render () para establecer y mostrar los cambios, respectivamente. Esto asegurará que $ viewValue y $ modelValue sean correctos y se muestren correctamente. También desea establecer ngTrim en false para evitar que el usuario agregue espacios en blanco más allá del límite. Esta respuesta es una amalgama de la respuesta de @ tymeJV y esta publicación en el blog … https://justforchangesake.wordpress.com/2015/01/10/useful-angularjs-directives/

Lo hará permitiendo retrocesos y eliminaciones.

 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; } }); } } }]); 

puedes usar este código:

  

y código AngularJS:

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

No es necesario usar una directiva AngularJS.

Simplemente use el atributo antiguo estándar html maxlength .

  

Podemos usar ng-value en su lugar:

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

En código html:

  

Esto verificará el valor y si es mayor que 60, reemplaza el valor con 0.

Como hay un problema en la directiva anterior (respuesta de tymeJV). Si ingresa la longitud máxima una vez, no aceptará ningún otro carácter, incluso el retroceso. Eso es si limit-to = “4” y si ingresó 4 caracteres en el cuadro de entrada, entonces no podrá eliminarlo. ASÍ QUE aquí está la respuesta actualizada.

 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; } }); } } }]); 

Podemos escribir la directiva para escuchar el evento de keypress . Pero para algunos navegadores antiguos, este evento no se desencadena. Es por eso que creé una directiva de tal manera que no hay dependencia en la limitación de eventos específicos del navegador. Creé una directiva angular para limitar el número de texto en el cuadro de entrada.

 '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; }); } }}]); 

Uso: permitiría solo 3 caracteres en el cuadro de entrada.

Ejecute esta operación en cualquier cambio al número:

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

Esto siempre limitará el “número” a 4 dígitos.

El material angular tiene una directiva mdMaxlength, si desea cortar la entrada a esta longitud, puede utilizar esta directiva:

  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; } }); } } }]); 

Uso:

  

Reitero lo que dijo @ Danilo Kobold.

Tenía que asegurarme de que los usuarios puedan ingresar solo números (0-9) [Sin ‘e’ o ‘.’ o ‘-‘] y un límite de 4 valores solamente.

 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(); } }); } } }]); 

Si desea utilizar solo el límite, utilice

 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(); } }); } } }]); 

Puede agregar más claves si desea la variable de exclusión, como esta:

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

Tengo idea de esta publicación

Espero haber ayudado a alguien

Puedes simplemente usar

 ui-mask="9999" 

como atributo en tu vista.

**

 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(); } }); } } }]); 

**

En Angular Js Material podemos limitar el campo de entrada por “maxLimit”, por ejemplo, necesitamos un límite de texto de entrada debe ser de 60 caracteres como:

 maxLimit ='60' 

código completo:

 

Utilice esta directiva si desea restringir la longitud máxima para un campo de entrada que está presente como parte de la plantilla de directiva personalizada. Esta es la forma html5 nativa de restringir max-lenth. Esto también manejará el caso de copiar y pegar también para restringir hasta el máximo durante el pegado.

 app.directive('inputWrapper', function() { return { restrict: 'A', template: "" }; }); app.directive('maxInputLength', function() { return { restrict: 'A', link: function(scope, elem, attrs) { var limit = parseInt(attrs.maxInputLength); angular.element(elem).find('input').attr('maxlength', limit); } }; });