如何使输入字段仅使用 AngularJS 接受 INTEGERS答案

【问题标题】：How can I make input field accept INTEGERS only with AngularJS如何使输入字段仅使用 AngularJS 接受 INTEGERS
【发布时间】：2016-10-08 18:57:18
【问题描述】：

如何防止在使用 angularJS 的输入字段中输入除数字（整数）以外的任何内容

type="number" 允许浮点数

我还尝试了几个带有 ng-pattern 的正则表达式，但这些浮点仍然是允许的，尽管我只明确指定了数字。

我现在正在摆弄观察者，但不能让它们正常工作，至少现在还不能。我正在考虑为这些字段编写 keydown 事件处理程序，但仍然希望有更好的方法。

【问题讨论】：

标签： javascript angularjs validation numbers integer

【解决方案1】：

如果输入类似 1.4 的内容，这将输入到 stepMitchMatch

Regex 模式是不必要的，因为您可以使用通用属性来做到这一点

:invalid{
  background: red
}
:valid{
  background: lime
}

&lt;input type="number" step="1"&gt;

如果您需要过度使用，请使用 angular-ui/mask 和 9?9?9?9?9?9?9?9?9?9?作为掩码值

【讨论】：

它不会阻止输入浮点数。你仍然可以写浮点数，但输入会失效，
OP 已经明确表示他不想让用户“输入”除数字以外的任何内容。所以其他一切都变得无关紧要。
当然，如果你想把简单的事情做得过火，那么你的方式就是正确的解决方案。认为无论如何花时间在服务器端进行验证更值得。知道你输入错误并改正就足够了

【解决方案2】：

试试这个：

<input type="number" step="1" ng-pattern="^[0-9]+$">

正则表达式将失败除整数以外的任何内容，并且该步骤将自动使上/下箭头加/减 1

【讨论】：

OP 希望禁止输入除数字以外的任何内容。

【解决方案3】：

您可以在 ng-pattern 中使用正则表达式字符串来验证您的输入。

ng-pattern="^-?[0-9]*$"

如果您只想允许正数，请删除“-？”

您还可以在此页面底部测试您的模式：https://docs.angularjs.org/api/ng/directive/ngPattern

编辑：

我错过了您希望防止用户输入无效字符的情况。这里有一个解决方案：https://stackoverflow.com/a/28975658/6440513 可以回答您的问题，您可以在此处提供的指令中使用正则表达式模式。

【讨论】：

【解决方案4】：

创建指令可能是什么？

myApp.directive("myNumber", function() {
  return {
    restrict: "EA",
    template: "<input type='number' step='1' />",
    replace: true,
    link: function(scope, e, attrs) {    
      e.bind("keydown", function(e) {

        if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
          e.preventDefault();
        }
      });
    }
  };
});

然后像这样在您的应用中使用它

<div ng-app="myApp">
 <my-number><my-number>
</div>

您可以进一步装饰它以允许绑定和特殊键

myApp.directive("myNumber", function() {
  return {
    restrict: "EA",
    template: "<input type='text' ng-model='model' />",
    replace: true,
    scope: {model : "="},
    link: function(scope, e, attrs) {

      e.bind("keydown", function(e) {
        // Special request from @endless for all these keys to be exempted
        //
        if (e.ctrlKey || e.altKey || e.keyCode >= 0 && e.keyCode <= 31 || e.keyCode >= 33 && e.keyCode <= 40 || e.keyCode==46) {
          return;
        }
        else if (!(e.ctrlKey || (e.keyCode >= 48 && e.keyCode <= 57 && !e.shiftKey))) {
          e.preventDefault();
        }
      }).bind("change", function() {
         var e = angular.element(this);
         if (isNaN(parseInt(e.val())) || e.val().indexOf(".") >= 0) {
            alert("incorrect number value entered");
            e.val("");
         }
      });
    }
  };
});

Here is a working plunkr example

Here is another fork of the above that allows all the special keys

Here is more info on directives

【讨论】：

元素已经被 jqLite 包裹了，你不必自己做，我还建议使用input[type="number"] 来控制键盘
觉得用attribute代替自定义指令会更好，如果要加required怎么办？
最好使用验证管道，如果您粘贴值，这将不起作用
@MartijnWelker jqLite 当在选择器中看到另一个 jq 对象时，只需按原样返回它。但你是对的，那样做是没有意义的。我修改了答案
@Endless 这个例子只是为了展示一种方法来实现 OP 试图实现的目标。这不是一个完整的应用程序，他当然可以根据自己的需要进行修复。我觉得你正在使用downvote，因为我的cmets对你的回答产生了仇恨。我没有对你的投票投反对票。

【解决方案5】：

你可以使用 ng-pattern 来解决这个问题

<input type="number" ng-pattern="/^[0-9]{1,7}$/">

这将允许您输入 0-9999999 范围内的数字

【讨论】：