web-dev-qa-db-fra.com

angular angulaire ignore la saisie non numérique

Je dois écrire du code pour IE8. J'ai une ng-repeat créant une table remplie de:

<input production-qty type="text" class="input-mini" maxlength="3" ng-model="day.qtyA" ui-event="{ blur : 'updateProduction(day)' }" ng-disabled="day.type=='H'">

IE8 ne fera pas type = nombre

Je veux une directive qui ignorera les frappes sur ce champ de saisie qui ne sont PAS des touches numériques .... ie .... 0 - 9

Je ne veux pas laisser l'utilisateur taper abc et polluer le modèle, puis leur dire que la valeur n'est pas valide. Je préfère ne pas leur laisser entrer des données qui ne sont pas valides en premier lieu.

javascriptangularjsangularjs-directive
21
Jason

HTML:

<input production-qty type="text" maxlength="3" ng-model="qty1">

Directif:

app.directive('productionQty', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        var transformedInput = text.replace(/[^0-9]/g, '');
        console.log(transformedInput);
        if(transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
        }
        return transformedInput;  // or return Number(transformedInput)
      }
      ngModelCtrl.$parsers.Push(fromUser);
    }
  }; 
});

Plunker

Voir aussi filtres sur ng-model dans une entrée . Ma réponse ci-dessus est calquée sur la réponse de pkozlowski.opensource.

J'ai regardé ng-pattern, mais il ne filtre pas ce qui est affiché dans la zone de texte. Il définit $scope.qty1 à undefined, mais les caractères indésirables sont visibles dans la zone de texte.

43
Mark Rajcok

HTML:

<input type="number" name="graduationYear" ng-model="gradYear" only-num>

Directif:

directive('onlyNum', function() {
    return function(scope, element, attrs) {

        var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110];
        element.bind("keydown", function(event) {
            //console.log($.inArray(event.which,keyCode));
            if ($.inArray(event.which, keyCode) === -1) {
                scope.$apply(function() {
                    scope.$eval(attrs.onlyNum);
                    event.preventDefault();
                });
                event.preventDefault();
            }

        });
    };
});
8
krish

Incluez d'abord ce code dans le fichier js numericInput.js

Directive: - 

.directive('numeric', function() {
    return function(scope, element, attrs) {

        $(element[0]).numericInput({ allowFloat: true });

    };
})

HTML: - 

 <input type="text" numeric />

[~ # ~] démo [~ # ~]  Numeric Demo

0
Nishchit Dhanani