Prevent user from typing non-number input

Question

I need to allow user to type in numbers only. Here is what I did.

Portion of my directive template:

<input type="text" maxlength="5" ng-keypress="allowNumbers($event)">

Function in my directive:

$scope.allowNumbers= function (ev) { var key = ev.charCode || ev.keyCode || 0; var allowed = ( key == 8 || key == 9 || key == 13 || key == 46 || key == 110 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)); return allowed; };

While debugging, I noticed that even the function returns true or false, the value in textbox does get entered. Can I somehow prevent it for non-number key press?

Possible duplicate of Prevent typing non-numeric in input type number — MysterX
– MysterX, Commented Mar 18, 2016 at 10:14
Yeah @LDJ is right if you want only numbers why cant you use number input field rather than text input field? — Amit Sirohiya
– Amit Sirohiya, Commented Mar 18, 2016 at 10:24

Erazihel · Accepted Answer · 2016-03-18 10:27:03Z

You can use a directive:

angular.module('myApp', []).directive('numbersOnly', function(){ return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { if (!inputValue) return '' var transformedInput = inputValue.replace(/[^0-9]/g, ''); if (transformedInput !== inputValue) { modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); } return transformedInput; }); } }; });

And use it like this:

<input type="text" maxlength="5" numbers-only/>

You could use this behavior into any input needed just by adding the numbers-only attribute.

See working JSFiddle.

Your solution is good, except for one thing. If the cursor is in the middle of the number, then type the letter (not numbers), the cursor moves to the end of the input.

deceze · Accepted Answer · 2016-03-18 10:17:34Z

3

I'd approach this simpler and in a way that is guaranteed to catch more possible forms of input (e.g. copy-paste):

<input type="number" ng-model="myNumber"> $scope.$watch('myNumber', function (input) { $scope.myNumber = input.replace(/\D/g, ''); });

answered Mar 18, 2016 at 10:17

deceze♦

525k89 gold badges807 silver badges954 bronze badges

2 Comments

Harpreet Over a year ago

If the user copy and paste the data like 'asdd1as3asd3', the outcome as per the described logic will be 133. I don't think that is the intention of the query asked.

deceze Over a year ago

Why not? What should it do in that case? The input is only allowed to consist of numbers, stripping out all non-numbers seems entirely reasonable to me.

Hassan Tariq · Accepted Answer · 2016-03-18 10:18:57Z

 function IsNumeric(e) { var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode; var ret = ((keyCode >= 48 && keyCode <= 57) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode)); // document.getElementById("error").style.display = ret ? "none" : "inline"; return ret; }

and In html

 <input type="text" onkeypress="return IsNumeric(event);" />

Collectives™ on Stack Overflow

Prevent user from typing non-number input

3 Answers 3

2 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Linked

Related