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](http://stackoverflow.com/questions/19966417/prevent-typing-non-numeric-in-input-type-number) — MysterX, Mar 18 '16 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, Mar 18 '16 at 10:24

Erazihel · Answer 1 · 2016-03-18T10:27:03.563

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**. — Stepan Kasyanenko, Mar 18 '16 at 10:35

score 3 · Accepted Answer · answered Mar 18 '16 at 10:17

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 '16 at 10:17

deceze

510,633
85
743
889

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. – Harpreet Mar 18 '16 at 10:20
1

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. – deceze Mar 18 '16 at 10:22

score 2 · Answer 3 · answered Mar 18 '16 at 10:18

2

    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);" />

answered Mar 18 '16 at 10:18

Hassan Tariq

730
7
15

Thanks for the answer – benjamin54 Mar 18 '16 at 10:43

Prevent user from typing non-number input

3 Answers3