如何只允许在输入中输入数字(数字和小数点)？

Question

我是angularjs的新手.我想知道只允许在文本框中输入有效数字的方法是什么.例如,用户可以输入"1.25",但不能输入"1.a"或"1 ..".当用户尝试输入将使其成为无效数字的下一个字符时,他无法输入.

提前致谢.

Answer 1

我编写了一个有效的CodePen示例来演示过滤数字用户输入的好方法.该指令目前只允许正整数,但可以很容易地更新正则表达式以支持任何所需的数字格式.

我的指令很容易使用:

<input type="text" ng-model="employee.age" valid-number />

该指令很容易理解:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
});

app.directive('validNumber', function() {
  return {
    require: '?ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      if(!ngModelCtrl) {
        return; 
      }

      ngModelCtrl.$parsers.push(function(val) {
        if (angular.isUndefined(val)) {
            var val = '';
        }
        var clean = val.replace( /[^0-9]+/g, '');
        if (val !== clean) {
          ngModelCtrl.$setViewValue(clean);
          ngModelCtrl.$render();
        }
        return clean;
      });

      element.bind('keypress', function(event) {
        if(event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
  };
});

我想强调的是,将模型引用保留在指令之外是很重要的.

我希望你觉得这有帮助.

非常感谢Sean Christe和Chris Grimes向我介绍了ngModelController

Answer 2

您可以尝试使用此指令来阻止将任何无效字符输入到输入字段中.(更新:这取决于具有模型明确知识的指令,这对于可重用性不是理想的,请参阅下面的可重用示例)

app.directive('isNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope) {    
            scope.$watch('wks.number', function(newValue,oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    scope.wks.number = oldValue;
                }
            });
        }
    };
});

它还解释了这些情况:

1. 从非空有效字符串转到空字符串
2. 负值
3. 负十进制值

我在这里创建了一个jsFiddle,你可以看到它是如何工作的.

UPDATE

关于Adam Thomas关于不直接在指令中包含模型引用的反馈(我也认为这是最好的方法),我已经更新了我的jsFiddle以提供一种不依赖于此的方法.

该指令使用局部范围与父范围的双向绑定.对指令内部变量所做的更改将反映在父作用域中,反之亦然.

HTML:

<form ng-app="myapp" name="myform" novalidate> 
    <div ng-controller="Ctrl">
        <number-only-input input-value="wks.number" input-name="wks.name"/>
    </div>
</form>

角度代码:

var app = angular.module('myapp', []);

app.controller('Ctrl', function($scope) {
    $scope.wks =  {number: 1, name: 'testing'};
});
app.directive('numberOnlyInput', function () {
    return {
        restrict: 'EA',
        template: '<input name="{{inputName}}" ng-model="inputValue" />',
        scope: {
            inputValue: '=',
            inputName: '='
        },
        link: function (scope) {
            scope.$watch('inputValue', function(newValue,oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    scope.inputValue = oldValue;
                }
            });
        }
    };
});

Answer 3

首先非常感谢Adam thomas 我使用了相同的Adam的逻辑,并通过一个小的修改来接受十进制值.

注意:这将允许只有2个十进制值的数字

这是我的工作示例

HTML

<input type="text" ng-model="salary" valid-number />

使用Javascript

    var app = angular.module('myApp', []);

    app.controller('MainCtrl', function($scope) {
    });

    app.directive('validNumber', function() {
      return {
        require: '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          if(!ngModelCtrl) {
            return; 
          }

          ngModelCtrl.$parsers.push(function(val) {
            if (angular.isUndefined(val)) {
                var val = '';
            }
            var clean = val.replace(/[^0-9\.]/g, '');
            var decimalCheck = clean.split('.');

            if(!angular.isUndefined(decimalCheck[1])) {
                decimalCheck[1] = decimalCheck[1].slice(0,2);
                clean =decimalCheck[0] + '.' + decimalCheck[1];
            }

            if (val !== clean) {
              ngModelCtrl.$setViewValue(clean);
              ngModelCtrl.$render();
            }
            return clean;
          });

          element.bind('keypress', function(event) {
            if(event.keyCode === 32) {
              event.preventDefault();
            }
          });
        }
      };
    });

Answer 4

使用step标记将最小可变值设置为某个十进制数:

例如step ="0.01"

<input type="number" step="0.01" min="0" class="form-control" 
name="form_name" id="your_id" placeholder="Please Input a decimal number" required>

这里有一些文档:

http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Answer 5

演示 - - jsFiddle

指示

   .directive('onlyNum', function() {
      return function(scope, element, attrs) {

         var keyCode = [8,9,37,39,48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105,110];
          element.bind("keydown", function(event) {
            console.log($.inArray(event.which,keyCode));
            if($.inArray(event.which,keyCode) == -1) {
                scope.$apply(function(){
                    scope.$eval(attrs.onlyNum);
                    event.preventDefault();
                });
                event.preventDefault();
            }

        });
     };
  });

HTML

 <input type="number" only-num>

注意:不要忘记包含角度js的jQuery

Answer 6

您可以轻松使用ng-pattern.

ng-pattern="/^[1-9][0-9]{0,2}(?:,?[0-9]{3}){0,3}(?:\.[0-9]{1,2})?$/"

Answer 7

有一个输入数字指令,我相信可以做你想要的.

<input type="number"
   ng-model="{string}"
   [name="{string}"]
   [min="{string}"]
   [max="{string}"]
   [required]
   [ng-required="{string}"]
   [ng-minlength="{number}"]
   [ng-maxlength="{number}"]
   [ng-pattern="{string}"]
   [ng-change="{string}"]>

官方文件在这里:http://docs.angularjs.org/api/ng.directive : input.number