Javascript 如何在输入类型=数字中设置最大长度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37538357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set maximum length in input type=number?
提问by vishnuprasad kv
I have a text field.
我有一个文本字段。
<input type="number" min="0" max="999">
But i am able to type as many numbers inside the text box.
但我可以在文本框中输入尽可能多的数字。
As I set max=999, I don't want that to happen.
Anyone knows the solution for this?
I have tried ng-maxlengthand maxlengthbut doesn't work.
当我设置 max=999 时，我不希望这种情况发生。有谁知道这个问题的解决方案？我试过了ng-maxlength，maxlength但没有用。
回答by Hymany Coogan
maxattribue specifies the maximum possible value that we can specify.
max属性指定我们可以指定的最大可能值。
for more details see this link
有关更多详细信息，请参阅此链接
I think the following will be helpful to you,
我认为以下内容会对您有所帮助，
//maxlength="10"
<input type="number" onKeyPress="if(this.value.length==10) return false;" />
回答by byteC0de
Try This
尝试这个
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
var oldNumber = 0;
$scope.numberChanged = function(number){
if(number<=999){
oldNumber = number;
}
return oldNumber;
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
<input type="number" min="0" max="999" ng-model="jimNum" ng-change="jimNum = numberChanged(jimNum);">
</div>回答by mujuonly
Try
尝试
<input type="number" min="0" max="999"
onKeyUp="if(this.value>999){this.value='999';}else if(this.value<0){this.value='0';}"
id="yourid">
回答by Jax Teller
There is JSFiddle, using JQuery.
有JSFiddle，使用 JQuery。
Your input
您的输入
<input type="number" id="num">
The script :
剧本 ：
$("#num").keypress( function(e) {
var current_val = $(this).val();
var typing_char = String.fromCharCode(e.which);
if (parseFloat(current_val + "" +typing_char) > 900) {
return false;
}
})
回答by Hassan Tarique
if you are limit the single field
如果您限制单个字段
<TextField type="number"
className="text-field-amount"
onInput={(e)=>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
}}
min={0}
回答by Hassan Tarique
if you are mapping more then one number Text field through map then do like this
如果您要通过地图映射多个文本字段，请执行以下操作
<TextField
key={key}
label={row.q_desc}
type="number"
onChange={this.onChange}
onInput={this.onInput}
/>
onInput= event => {
event.preventDefault();
debugger;
var textField_name = this.state.input_Name;
if (textField_name == "Zip") {
event.target.value = Math.max(0, parseInt(event.target.value))
.toString()
.slice(0, 4);
}
if (textField_name == "Social Security") {
event.target.value = Math.max(0, parseInt(event.target.value))
.toString()
.slice(0, 9);
}
if (textField_name == "Phone") {
event.target.value = Math.max(0, parseInt(event.target.value))
.toString()
.slice(0, 10);
}
};
onChange(e) {
debugger;
this.setState({
input_Name: e.target.name
});
}
回答by Scorpionk
The solution that worked for me is to use onkeypress with the max attribute. For e.g. for max length of 999
对我有用的解决方案是将 onkeypress 与 max 属性一起使用。例如，最大长度为 999
<input type="number" max="999" onkeypress="if (this.value.length > 2) return false;"/>Tested in Chrome, Firefox and Edge.
在 Chrome、Firefox 和 Edge 中测试。
