Comment puis-je restreindre une entrée pour qu'elle n'accepte que des chiffres ?

Question

J'utilise ngChange dans AngularJS pour déclencher une fonction personnalisée qui supprimera toutes les lettres que l'utilisateur ajoute à l'entrée.

<input type="text" name="inputName" data-ng-change="numbersOnly()"/>

Le problème est que je dois cibler l'entrée qui a déclenché numbersOnly() afin que je puisse supprimer les lettres saisies. J'ai cherché longtemps sur Google et je n'ai rien trouvé à ce sujet.

Qu'est-ce que je peux faire ?

Answer 1

Un moyen simple utiliser type="nombre" si cela fonctionne pour votre cas d'utilisation :

<input type="number" ng-model="myText" name="inputName">

Un autre moyen facile : ng-pattern peut également être utilisé pour définir une regex qui limitera ce qui est autorisé dans le champ. Voir aussi le page "cookbook" sur les formulaires .

Hackish ? façon , $voyez le ng-model dans votre contrôleur :

<input type="text"  ng-model="myText" name="inputName">

Contrôleur :

$scope.$watch('myText', function() {
   // put numbersOnly() logic here, e.g.:
   if ($scope.myText  ... regex to look for ... ) {
      // strip out the non-numbers
   }
})

Meilleur moyen utiliser un $parser dans une directive. Je ne vais pas répéter la réponse déjà bonne fournie par @pkozlowski.opensource, donc voici le lien : https://stackoverflow.com/a/14425022/215945

Toutes les solutions ci-dessus impliquent l'utilisation de ng-model, qui rendent la recherche de this inutile.

L'utilisation de ng-change posera des problèmes. Voir AngularJS - la réinitialisation de $scope.value ne change pas la valeur dans le modèle (comportement aléatoire)

Answer 2

Utilisation de ng-pattern sur le champ de texte :

<input type="text"  ng-model="myText" name="inputName" ng-pattern="onlyNumbers">

Ajoutez ensuite ceci à votre contrôleur

$scope.onlyNumbers = /^\d+$/;

Answer 3

Voici mon implémentation de la $parser que @Mark Rajcok recommande comme la meilleure méthode. C'est essentiellement la solution de @pkozlowski.opensource. excellent $parser pour la réponse texte mais réécrit pour n'autoriser que les valeurs numériques. Tout le mérite lui revient, c'est juste pour vous épargner les 5 minutes de lecture de cette réponse et de réécriture de la vôtre :

app.directive('numericOnly', function(){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {

            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;

                if (transformedInput!=inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    };
});

Et tu l'utilisais comme ça :

<input type="text" name="number" ng-model="num_things" numeric-only>

Il est intéressant de noter que les espaces n'atteignent jamais l'analyseur syntaxique à moins d'être entourés d'un caractère alphanumérique. .trim() au besoin. De plus, cet analyseur fait PAS travailler sur <input type="number"> . Pour une raison quelconque, les non-numériques ne parviennent jamais à l'analyseur syntaxique où ils seraient supprimés, mais ils do dans le contrôle d'entrée lui-même.

Answer 4

Aucune des solutions proposées n'a fonctionné pour moi, et après quelques heures, j'ai finalement trouvé la solution.

C'est la directive angulaire :

angular.module('app').directive('restrictTo', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var re = RegExp(attrs.restrictTo);
            var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;

            element[0].addEventListener('keydown', function(event) {
                if (!exclude.test(event.key) && !re.test(event.key)) {
                    event.preventDefault();
                }
            });
        }
    }
});

Et l'entrée ressemblerait à :

<input type="number" min="0" name="inputName" ng-model="myModel" restrict-to="[0-9]">

L'expression régulière évalue la touche pressée, pas la valeur .

Il fonctionne aussi parfaitement avec les entrées type="number" parce qu'elle empêche de changer sa valeur, de sorte que la clé n'est jamais affichée et qu'elle ne perturbe pas le modèle.

Answer 5

Voici une assez bonne solution pour ne permettre que l'entrée d'un numéro dans le champ input :

<input type="text" ng-model="myText" name="inputName" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>