我有以下类型的输入:
<input class="number text-center" type="number" step="1" ng-model="item.formattedQuantity" ng-disabled="item.discount === '100.00'" ng-change="change(item)" ng-blur="blur(item)" min="0" />
我该如何禁止用户添加十进制值?我尝试添加step = 0.01和ng-pattern ng-pattern =“ / ^ [0-9] + $ /”,但用户仍然可以放置1.5、31.56等值]
我该怎么办?
您需要创建一个指令来实现这一目标。
app.directive('numericInput', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('input', function (event) {
var regex = RegExp('^[0-9]+$');
if(regex.test(event.target.value)){
event.preventDefault();
return true;
else {
event.preventDefault(); return false;
}
});
}
}
});
或者您可以尝试angularjs样式(found codepen here)
app.directive('numericInput', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
if (text) {
var transformedInput = text.replace(/[^0-9]/g, '');
if (transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput;
}
return undefined;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});
然后用您的html
<input numeric-input class="number text-center" type="number" step="1" ng-model="item.formattedQuantity" ng-disabled="item.discount === '100.00'" ng-change="change(item)" ng-blur="blur(item)" min="0" />