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

您可以使用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;
            });
        }
    };
});

并像这样使用它：

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

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

请参阅working JSFiddle。

Answer 2

我接近这个更简单，并且保证能够捕获更多可能的输入形式（例如复制粘贴）：

<input type="number" ng-model="myNumber">

$scope.$watch('myNumber', function (input) {
    $scope.myNumber = input.replace(/\D/g, '');
});

Answer 3

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

和in html

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

阻止用户键入非数字输入

3 个答案: