防止用户输入非数字输入答案

【问题标题】：Prevent user from typing non-number input防止用户输入非数字输入
【发布时间】：2016-03-18 10:12:36
【问题描述】：

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

我的指令模板的一部分：

<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，文本框中的值也会被输入。我可以以某种方式防止非数字键按下吗？

【问题讨论】：

Prevent typing non-numeric in input type number的可能重复
你的函数是allowNumbers还是allowNumberOnly？
尝试使用if (!allowed) ev.preventDefault();
你不能只使用 type="number" 吗？
是的，@LDJ 是对的，如果您只想要数字，为什么不能使用数字输入字段而不是文本输入字段？

标签： javascript angularjs

【解决方案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。

【讨论】：

你的解决方案很好，除了一件事。如果光标在数字中间，则键入字母（不是数字），光标移动到输入的末尾。
感谢您的回答

【解决方案2】：

我会更简单地处理这个问题，并且可以保证捕获更多可能的输入形式（例如复制粘贴）：

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

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

【讨论】：

如果用户复制并粘贴像'asdd1as3asd3'这样的数据，按照描述的逻辑结果将是133。我认为这不是查询的意图。
为什么不呢？在这种情况下，它应该做什么？输入只允许由数字组成，去掉所有非数字对我来说似乎是完全合理的。

【解决方案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;
}

在 html 中

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

【讨论】：

感谢您的回答