如何将输入限制为仅接受数字？

Question

我在AngularJS中使用ngChange来触发一个自定义函数,该函数将删除用户添加到输入的任何字母.

<input type="text" name="inputName" data-ng-change="numbersOnly()"/>

问题是我需要定位触发的输入,numbersOnly()以便我可以删除输入的字母.我在Google上看了很长时间,并且无法找到任何与此有关的内容.

我能做什么？

Answer 1

简单的方法,如果它适用于您的用例,请使用type ="number":

<input type="number" ng-model="myText" name="inputName">

另一种简单的方法: ng-pattern也可用于定义一个限制字段允许内容的正则表达式.另请参阅有关表单的"食谱"页面.

hackish的？方式,$在你的控制器中观察ng-model:

<input type="text"  ng-model="myText" name="inputName">

控制器:

$scope.$watch('myText', function() {
   // put numbersOnly() logic here, e.g.:
   if ($scope.myText  ... regex to look for ... ) {
      // strip out the non-numbers
   }
})

最好的方法是,在指令中使用$ parser.我不打算重复@ pkozlowski.opensource提供的已经很好的答案,所以这里是链接:https://stackoverflow.com/a/14425022/215945

所有上述解决方案都涉及使用ng-model,这使得查找变得this不必要.

使用ng-change会导致问题.请参阅AngularJS - 重置$ scope.value不会更改模板中的值(随机行为)

Answer 2

使用ng-pattern该文本字段:

<input type="text"  ng-model="myText" name="inputName" ng-pattern="onlyNumbers">

然后将其包含在您的控制器上

$scope.onlyNumbers = /^\d+$/;

Answer 3

所提出的解决方案都没有对我有用,几个小时后我终于找到了方法.

这是角度指令:

angular.module('app').directive('restrictTo', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var re = RegExp(attrs.restrictTo);
            var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;

            element[0].addEventListener('keydown', function(event) {
                if (!exclude.test(event.key) && !re.test(event.key)) {
                    event.preventDefault();
                }
            });
        }
    }
});

输入看起来像:

<input type="number" min="0" name="inputName" ng-model="myModel" restrict-to="[0-9]">

正则表达式计算按下的键,而不是值.

它也可以与输入完美配合,type="number"因为它可以防止更改其值,因此密钥永远不会显示,也不会影响模型.

Answer 4

这是我对$parser@Mark Rajcok推荐的最佳解决方案的实现.它本质上是@ pkozlowski.opensource的文本答案的优秀$解析器,但重写只允许数字.所有的功劳归功于他,这只是为了节省你5分钟阅读答案,然后重写你自己:

app.directive('numericOnly', function(){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {

            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;

                if (transformedInput!=inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    };
});

你会像这样使用它:

<input type="text" name="number" ng-model="num_things" numeric-only>

有趣的是,空格永远不会到达解析器,除非被字母数字所包围,所以你必须.trim()根据需要.此外,该解析器不会不工作的<input type="number">.出于某种原因,非NUMERICS始终无法进入,他们会被移除的解析器,但他们这样做使之成为输入控件本身.

Answer 5

这是一个非常好的解决方案，只允许输入数字input：

<input type="text" ng-model="myText" name="inputName" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>