Comment pouvez-vous limiter la valeur de l'entrée en utilisant AngularJS?
Je cherche des moyens de limiter la valeur à 4 de l'entrée et de traiter la valeur à 4 chiffres vers mon contrôleur.
<input type="number" class="form-control input-lg"
ng-model="search.main" placeholder="enter first 4 digits: 09XX">
{{ search.main | limitTo:4}}
Peut toujours faire une directive pour cela:
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">
Vous pouvez toujours utiliser ng-minlength, ng-maxlength pour la longueur de chaîne et min, max pour les limites numériques. Essaye ça
<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">
J'ai utilisé la réponse acceptée comme point de départ, mais c'est ce que j'ai proposé.
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();
}
});
}
};
});
usage
<input name="name" type="text" ng-model="nameVar" aw-limit-length="10"/>
La clé consiste à utiliser $ setViewValue () et $ render () pour définir et afficher les modifications, respectivement. Cela garantira que $ viewValue et $ modelValue sont corrects et affichés correctement. Vous souhaitez également définir ngTrim sur false pour empêcher l'utilisateur d'ajouter des espaces au-delà de la limite. Cette réponse est une fusion des réponses de @ tymeJV et de cet article de blog ... https://justforchangesake.wordpress.com/2015/01/10/useful-angularjs-directives/
Le fera en permettant les espaces de retour et les suppressions.
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;
}
});
}
}
}]);
Pas besoin d'utiliser une directive AngularJS.
Utilisez simplement le bon vieil attribut html standard maxlength .
<input type="text" maxlength="30" />
vous pouvez utiliser ce code:
<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">
et code AngularJS:
$scope.limitKeypress = function ($event, value, maxLength) {
if (value != undefined && value.toString().length >= maxLength) {
$event.preventDefault();
}
}
Nous pouvons utiliser ng-value à la place:
ng-value="(minutes > 60 ? minutes = 0 : minutes)"
En code html:
<input type="text" class="form-control" ng-model="minutes" ng-maxlength="2" ng-pattern="/^[0-9]*$/" ng-value="(minutes > 60 ? minutes = 0 : minutes)"/>
Cela vérifiera la valeur et, si elle est supérieure à 60, la valeur sera remplacée par 0.
Comme il y a un problème dans la directive ci-dessus (réponse de tymeJV). Si vous entrez une fois la longueur maximale, aucun autre caractère ne sera accepté, pas même le retour arrière. C'est-à-dire si limit-to = "4" et si vous avez saisi 4 caractères dans la zone de saisie, vous ne pourrez pas le supprimer. SO voici la réponse mise à jour.
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;
}
});
}
}
}]);
Nous pouvons écrire la directive pour écouter l'événement keypress. Mais pour certains anciens navigateurs, cet événement n'est pas déclenché. C’est la raison pour laquelle j’ai créé une directive de manière à ne pas dépendre de la limitation des événements spécifiques au navigateur .
'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;
});
}
}}]);
Utilisation: <input limit-to="3" ng-model="test"/> n'autoriserait que 3 caractères dans la zone de saisie.
Exécutez cette opération sur toute modification du numéro:
var log = Math.log(number) / Math.log(10);
if (log >= 4)
number = Math.floor(number / Math.pow(10, Math.ceil(log - 4)));
Cela limitera toujours le "numéro" à 4 chiffres.
Je répète ce que @Danilo Kobold a dit.
Je devais m'assurer que les utilisateurs ne peuvent entrer que des chiffres (0-9) [Sans 'e' ou '.' ou '-'] et une limite de 4 valeurs seulement.
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 vous voulez utiliser uniquement la limite, utilisez
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();
}
});
}
}
}]);
Vous pouvez ajouter plus de clés si vous voulez à la variable d'exclusion, comme ceci:
var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;
Vous avez une idée de ceci post
J'espère que j'ai aidé quelqu'un.
Le matériau angulaire a une directive mdMaxlength, si vous voulez couper l’entrée à cette longueur, vous pouvez utiliser cette directive:
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;
}
});
}
}
}]);
Usage:
<input type="text" md-maxlength="30" force-maxlength=""/>
Vous pouvez simplement utiliser
ui-mask="9999"
comme attribut à votre avis.
Dans Angular Js Material, nous pouvons limiter le champ de saisie à "maxLimit". Par exemple, nous avons besoin de la limite du texte saisi si 60 caractères suffisent:
maxLimit ='60'
code complet:
<form-input-field flex
class="input-style-1"
title="Quick response tag title"
placeholder="Write a catchy title to help users get more information on the service card"
form-name="parent.qrtForm"
show-error="showError"
name="title"
maxLength="65"
text-limit="65"
required="true"
ng-model="newQrt.tagName">
Utilisez cette directive si vous souhaitez limiter la longueur maximale d'un champ de saisie présent dans le modèle de directive personnalisée. C'est le moyen natif html5 de restreindre max-lenth. Cela gérera également le cas du copier-coller afin de limiter la longueur maximale du collage.
app.directive('inputWrapper', function() {
return {
restrict: 'A',
template: "<input type='text'/>"
};
});
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);
}
};
});<input-wrapper max-input-lenth="35"></input-wrapper>**
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();
}
});
}
}
}]);
**