javascript - Prevent user from typing non-number input - Stack Overflow

admin管理员组

文章数量:1391989

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?

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?

• javascript
• angularjs

Share Improve this question Follow edited Mar 18, 2016 at 10:44 Erazihel 7,61566 gold badges3434 silver badges5656 bronze badges asked Mar 18, 2016 at 10:12 benjamin54benjamin54 1,30044 gold badges2828 silver badges5050 bronze badges 5

• Possible duplicate of Prevent typing non-numeric in input type number – MysterX Commented Mar 18, 2016 at 10:14
• Is your function named allowNumbers or allowNumberOnly? – Frédéric Hamidi Commented Mar 18, 2016 at 10:15
• try to use if (!allowed) ev.preventDefault(); – zooblin Commented Mar 18, 2016 at 10:15
• 1 cant you just use type="number"? – LDJ Commented Mar 18, 2016 at 10:16
• Yeah @LDJ is right if you want only numbers why cant you use number input field rather than text input field? – Amit Sirohiya Commented Mar 18, 2016 at 10:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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, '');
});

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

本文标签： javascriptPrevent user from typing nonnumber inputStack Overflow