我正在尝试将输入限制为以下字段中的数字
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.myNumbers = function(fieldName){
var tN = fieldName.replace(/[^\d]/g, "");
if(tN != fieldName)
fieldName = tN
};
它适用于以下代码,但更改了两个字段
$scope.$watch('myNumbers', function() {
var tN = $scope.myNumbers.replace(/[^\d]/g, "");
if(tN != $scope.myNumbers)
$scope.myNumbers = tN;
})
需要更改用户输入的输入字段的值,而不是两者都
答案 0 :(得分:4)
使用此处的指令:https://stackoverflow.com/a/19675023/149060而不是ng-change功能。复制到此处以便于参考:
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;
});
}
};
});
答案 1 :(得分:2)
您可以尝试添加输入
ng-pattern='/^\d{2}$/'
答案 2 :(得分:2)
这是我用来限制允许密钥的指令。
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]">
正则表达式评估按下的键,而不是值。
它也可以与输入type="number"
完美配合,因为它可以防止更改其值,因此密钥永远不会显示,也不会影响模型。