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.

See stackoverflow.com/a/12947995/215945 for examples of how to build a custom validator. — Mark Rajcok
– Mark Rajcok, Commented Mar 21, 2013 at 18:17
I don't see how that would help me. I'm not just trying to stop data from getting into the model...but from even appearing on the screen. I want to implement input type=number by using type=text with a directive — Jason
– Jason, Commented Mar 21, 2013 at 18:33
I'm sorry that wasn't too helpful. A $parser can be used to filter what shows in the input textbox. Please see the plunker I wrote in my answer. — Mark Rajcok
– Mark Rajcok, Commented Mar 21, 2013 at 19:40

Community · Accepted Answer · 2017-05-23 11:54:20Z

43

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.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 21, 2013 at 19:18

Mark Rajcok

365k114 gold badges501 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jason Over a year ago

"I looked at ng-pattern, but it does not filter what is shown in the textbox" - exactly....I'll give this a try and see what how it works...thanks for the help!

epitka Over a year ago

This did not work for me, I had to add as very first line in function fromUser following code if (text === undefined) return text;

Jason Over a year ago

@MarkRajcok - after using angular with more frequency it dawned on me I could make this even more usable as a "filtered-input" directive that takes the regex as an attribute :-)

Matthias Max Over a year ago

What if I wanted to add 2 directives to an input - each adding to modelCtrl.$parsers by push()? It seems only the "ladder" is being executed in that case.

zai chang Over a year ago

Thanks for this answer, it works for me using angularjs 1.3.x. If it helps anyone I ended up adding the following to prevent the cursor from jumping to the end on invalid characters:

if(transformedInput !== inputValue) { 		var el = element[0]; 		var cursorPosition = el.selectionStart - 1;	// minus one because the character entry advances the cursor position 	    ngModelCtrl.$setViewValue(transformedInput); 	    ngModelCtrl.$render(); 		el.setSelectionRange(cursorPosition, cursorPosition); 	}

|

Zyberzero · Accepted Answer · 2015-01-23 14:44:53Z

8

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

        });
    };
});

edited Jan 23, 2015 at 14:44

Zyberzero

1,6042 gold badges16 silver badges36 bronze badges

answered Jan 23, 2015 at 14:26

krish

811 silver badge1 bronze badge

1 Comment

Guss Over a year ago

This works well, only problem is that it prevents CTRL+a.

Nishchit · Accepted Answer · 2013-12-04 06:41:18Z

0

First include this code in js file numericInput.js

Directive : -

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

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

    };
})

HTML : -

 <input type="text" numeric />

DEMO Numeric Demo

answered Dec 4, 2013 at 6:41

Nishchit

19.2k12 gold badges58 silver badges81 bronze badges

2 Comments

Ronnie Overby Over a year ago

try to enter a negative number

Nishchit Over a year ago

use this <input type="number" numeric /> ...but you still not write minus sign you have to use down arrow key for negative number

hjdud · Accepted Answer · 2014-08-20 10:42:58Z

-2

not directive but I use just:

controller:

    $scope.blockNonNumber = function (val, field){

       $scope[field] = val.toString().replace(/[^0-9]/g, '');

    }

html:

<input type="text" ng-model="price" ng-change="blockNonNumber(price, 'price')" pattern="[0-99]">

it's not directive but can be used in directive as wellside

answered Aug 20, 2014 at 10:42

hjdud

213 bronze badges

Collectives™ on Stack Overflow

angular directive ignore non-numeric input

4 Answers 4

7 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related