javascript - 防止用户键入非数字输入

Question

我需要允许用户仅输入数字。这就是我所做的。

我的指令模板的一部分:

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

我的指令中的函数:

$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;
};

在调试时，我注意到即使函数返回 true 或 false，文本框中的值也会被输入。我可以以某种方式阻止非数字键按下吗？

Answer 1

您可以使用指令:

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

并像这样使用它:

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

您只需添加 numbers-only 属性即可将此行为用于任何所需的输入。

参见working JSFiddle .