使用AngularJS将输入限制为输入字段上的数字

我试图将输入限制为以下字段中的数字

Postal Code:
<input type="text" id="zipCode1" name="zipCode1" size="4" maxlength="5" ng-model="zipCode1" ng-change="myNumbers(zipCode1)" />
<input type="text" id="zipCode2" name="zipCode2" size="3" maxlength="4" ng-model="zipCode2" ng-change="myNumbers(zipCode2)" />

它使用以下代码，但同时更改两个字段

$scope.$watch('myNumbers', function() {
var tN = $scope.myNumbers.replace(/[^\d]/g, "");
    if(tN != $scope.myNumbers)
    $scope.myNumbers = tN;
})

---

需要更改用户正在键入的输入字段的值，而不是同时更改这两个值。您可以尝试向输入添加ng模式='/^\d{2}$/'

使用此处找到的指令：而不是ng change函数。此处复制以便于参考：

ng-pattern='/^\d{2}$/'

angular.module('app').
  directive('onlyDigits', function () {

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            if (!ngModel) return;
            ngModel.$parsers.unshift(function (inputValue) {
                var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' '); }).join('');
                ngModel.$viewValue = digits;
                ngModel.$render();
                return digits;
            });
        }
    };
});

---

这是我为限制允许的密钥而做的一个指令

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="text" name="zipCode1" maxlength="5" ng-model="zipCode1" restrict-to="[0-9]">

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

---

它还可以完美地与输入配合使用，因为它可以防止更改其值，因此不会显示该键，也不会干扰模型。

使用数据ng模型而不是ng模型。。它会自动进行验证。你不应该调用我猜的任何函数。我提到的链接：我认为它对你有帮助。你应该阅读上的角度文档。在这里，您将了解如何使用CSS对字段进行角度验证。@Edwin Dalorzo'ng change'被调用，但不会使用'fieldName=tN'分配值，尽管这不会阻止您输入数字。如果输入错误，那么只会将字段标记为无效。@EdwinDalorzo-你说得太对了！ng模式对初学者来说有点误导。IE8的行为是什么？它是否缺少一些可以添加为填隙片的内容？它正在使用字符，而在其他浏览器中它只使用数字，知道吗？可能与拆分中的这种行为差异有关：-可能将拆分（）.join（）行修改为单独的语句？我更改了一行代码，它在所有浏览器中都有效，

var digits=inputValue.split（“”）.filter（函数）{return（！isNaN（s）&&s！=''；}）.join（“”）到
var digits=inputValue.replace（/[^\d]/g，”）
<input type="text" name="zipCode1" maxlength="5" ng-model="zipCode1" restrict-to="[0-9]">