我想将 html input[number] 设置<input type="number" />为仅允许整数输入（而不是浮点数）。
基本上，html input[number] 允许 '.' 输入浮点输入，我不希望这样。
有没有一种快速的方法可以在 AngularJS 中完成它？
问问题
32997 次
7 回答
20
这是如何实现的。
输入类型 - '文本'
指示：
app.directive('onlyNumbers', function () { return { restrict: 'A', link: function (scope, elm, attrs, ctrl) { elm.on('keydown', function (event) { if(event.shiftKey){event.preventDefault(); return false;} //console.log(event.which); if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) { // backspace, enter, escape, arrows return true; } else if (event.which >= 48 && event.which <= 57) { // numbers 0 to 9 return true; } else if (event.which >= 96 && event.which <= 105) { // numpad number return true; } // else if ([110, 190].indexOf(event.which) > -1) { // // dot and numpad dot // return true; // } else { event.preventDefault(); return false; } }); } } });HTML：
<input type="text" only-numbers>输入类型 - '数字'
指示：
app.directive('noFloat', function () { return { restrict: 'A', link: function (scope, elm, attrs, ctrl) { elm.on('keydown', function (event) { if ([110, 190].indexOf(event.which) > -1) { // dot and numpad dot event.preventDefault(); return false; } else{ return true; } }); } } });HTML：
<input type="number" step="1" no-float>
查看Plunker
于 2015-12-01T07:03:37.827 回答
3
使用模式属性：
<input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>
请看演示：https ://jsfiddle.net/JBalu/vfbgrd5n/
可能会有所帮助。
于 2015-12-01T07:47:22.797 回答
2
请找到小提琴 http://jsfiddle.net/8a4sg0mo/
angular.module('myApp', []).directive('numbersOnly', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == undefined) return ''
var transformedInput = inputValue.replace(/[^0-9]/g, '');
if (transformedInput!=inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});
function MyCtrl($scope) {
$scope.number = ''
}
它将只允许输入数字，完全使用 angular js 完成。
于 2015-12-01T05:40:44.017 回答
1
(function () {
angular
.module('urModule').directive('numbersOnly', numbersOnly);
function numbersOnly() {
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);
}
};
}
})();于 2020-05-11T13:17:00.820 回答
1
这个我找了很多次，之前的项目中使用过directives，但是终于找到了angular js自己提供的方式，因此可以摆脱directives。看看这个链接angularJs给出的代码
那里显示的代码如下：
<script>
angular.module('numberExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.example = {
value: 12
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>Number:
<input type="number" name="input" ng-model="example.value"
min="0" max="99" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.number">
Not valid number!</span>
</div>
<tt>value = {{example.value}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
于 2018-08-10T09:29:14.853 回答
0
完整工作示例：自定义指令 以下工作正常
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="AppCtrl">
<input type="text" allow-numbers-only />
<script>
var app = angular.module("myApp", []);
app.controller("AppCtrl", function($scope) {
$scope.title = "App"
})
app.directive("allowNumbersOnly", function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
element.bind("keydown", function(event) {
if (event.keyCode == 8) {
return false;
} else if (!(event.keyCode > 47 && event.keyCode < 58) || event.shiftKey) {
event.preventDefault();
return false;
}
});
}
}
});
</script>
</body>
</html>于 2018-02-26T06:33:51.207 回答
-3
input[type=number]根据定义，只接受整数作为输入。自己尝试一下。尝试输入字母，它不会让你。
不需要 JavaScript，因为它已经内置了。您也许是说input[type=text]？
您可以通过角度指令来实现这一点。它看起来像这样（虽然不确定我的语法）
app.directive('onlyNumbers', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind("keydown", function(event) {
if ((event.keyCode > 47 && event.keyCode < 58) && !event.shiftKey) {
event.preventDefault();
return false;
}
});
}
});
语法可能有一些错误，但我将分解基本公式。
attribute由于我们正在使用输入元素，因此我们使用指令是有意义的。我们可以通过将restrict属性设置为 A来做到这一点。
由于我们将监听按键事件，我们应该使用该link函数。我们想监听keydown事件，以检测何时开始按下某个键。
要查找用户是否输入了数字，我们将使用keyCodes，其中数字键是 48 到 57，分别代表 0 到 9。但是，我们没有考虑需要按数字键的特殊字符。因此，我们确保也没有按下 shift 键。
然后我们可以将此指令作为属性添加到我们的输入元素上。
<input type="text" only-numbers />
于 2015-12-01T05:37:39.717 回答