Question

如何使用angularJS

防止在数字（整数）之外输入任何内容到输入字段中

type =“number”允许浮点数

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

我现在正在和观察者打交道，但是不能让它们正常工作，至少现在还没有。我正在考虑为这些领域编写keydown事件处理程序，但仍希望有更好的方法。

Answer 1

如果输入类似1.4

的内容，这将输入stepMitchMatch

正则表达式是不必要的，因为您可以使用公共属性

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

<input type="number" step="1">

如果你需要过头，那么使用angular-ui/mask 9？9？9？9？9？9？9？9？9？9？作为蒙面值

Answer 2

试试这个：

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

正则表达式将失败，然后是一个圆整数，该步骤将自动使向上/向下箭头加/减1

Answer 3

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

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

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

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

修改：

我想念你想阻止用户输入无效字符。这里有一个解决方案：https://stackoverflow.com/a/28975658/6440513可以回答你的问题，你可以在那里提供的指令中使用正则表达式。

Answer 4

您可以使用ng-pattern解决此问题

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

这将允许您输入0-9999999

范围内的数字

Answer 5

创建指令可能是？

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

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

5 个答案: