angular directive ignore non-numeric input

Question

I have to write some code for IE8. I have an ng-repeat creating a table filled with:

<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 won't do type=number

I want a directive that will ignore key strokes on that input field that are NOT numeric keys....ie....0 - 9

I don't want to let the user type abc and pollute the model and then tell them the value is invalid. I'd rather not let them enter any data that's not valid in the first place.

Answer 1

HTML:

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

Directive:

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

See also filters on ng-model in an input. My answer above is modeled off pkozlowski.opensource's answer.

I looked at ng-pattern, but it does not filter what is shown in the textbox. It sets $scope.qty1 to undefined, but the undesired characters are visible in the textbox.

Answer 2

HTML:

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

Directive:

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