Html 在 Chrome 中忽略 input type="number" 的 maxlength
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18510845/
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
maxlength ignored for input type="number" in Chrome
提问by Prajila V P
The maxlengthattribute is not working with <input type="number">. This happens only in Chrome.
该maxlength属性不适用于<input type="number">. 这只发生在 Chrome 中。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
回答by André Dion
From MDN's documentation for <input>
If the value of the typeattribute is
text,search,password,tel, orurl, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.
如果type属性的值为
text、search、password、tel、 或url，则该属性指定用户可以输入的最大字符数（以 Unicode 代码点表示）；对于其他控件类型，它被忽略。
So maxlengthis ignored on <input type="number">by design.
所以maxlength被<input type="number">设计忽略了。
Depending on your needs, you can use the minand maxattributes as inonsuggested in his/her answer (NB: this will only define a constrained range, not the actual character length of the value, though -9999 to 9999 will cover all 0-4 digit numbers), or you can use a regular text input and enforce validation on the field with the new patternattribute:
根据您的需要，您可以使用他/她的答案中建议的inonmin和max属性（注意：这只会定义一个受限范围，而不是值的实际字符长度，尽管 -9999 到 9999 将涵盖所有 0-4 digit numbers），或者您可以使用常规文本输入并使用新属性对字段进行验证：pattern
<input type="text" pattern="\d*" maxlength="4">
回答by Neha Jain
Max length will not work with <input type="number"the best way i know is to use oninputevent to limit the maxlength. Please see the below code.
最大长度不适用于<input type="number"我所知道的最好方法是使用oninput事件来限制最大长度。请看下面的代码。
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
回答by Vikasdeep Singh
Many guys posted onKeyDown()event which is not workingat all i.e. you can not delete once you reach the limit. So instead of onKeyDown()use onKeyPress()and it works perfectly fine.
许多人发布了根本不起作用的onKeyDown()事件，即一旦达到限制就无法删除。所以，而不是使用，它工作得很好。onKeyDown()onKeyPress()
Below is working code:
下面是工作代码：
User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />回答by Maycow Moura
I have two ways for you do that
我有两种方法让你做到这一点
First: Use type="tel", it'll work like type="number"in mobile, and accept maxlength:
第一：使用type="tel"，它会像type="number"在移动设备中一样工作，并接受 maxlength：
<input type="tel" />
Second: Use a little bit of JavaScript:
第二：使用一点点 JavaScript：
<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
回答by inon
You can use the minand maxattributes.
您可以使用min和max属性。
The following code do the same:
下面的代码做同样的事情：
<input type="number" min="-999" max="9999"/>
回答by Masood
Change your input type to text and use "oninput" event to call function:
将输入类型更改为文本并使用“oninput”事件调用函数：
<input type="text" oninput="numberOnly(this.id);" class="test_css" maxlength="4" id="flight_number" name="number"/>
Now use Javascript Regex to filter user input and limit it to numbers only:
现在使用 Javascript Regex 过滤用户输入并将其限制为仅数字：
function numberOnly(id) {
// Get element by id which passed as parameter within HTML element event
var element = document.getElementById(id);
// Use numbers only pattern, from 0 to 9
var regex = /[^0-9]/gi;
// This removes any other character but numbers as entered by user
element.value = element.value.replace(regex, "");
}
回答by Mohammad Mahroz
I once got into the same problem and found this solution with respect to my needs. It may help Some one.
我曾经遇到过同样的问题，并根据我的需求找到了这个解决方案。它可能会帮助某人。
<input type="number" placeholder="Enter 4 Digits" max="9999" min="0"
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>
Happy Coding :)
快乐编码:)
回答by shinobi
You can try this as well for numeric input with length restriction
您也可以尝试使用具有长度限制的数字输入
<input type="tel" maxlength="4" />
回答by harley81
Here is my solution with jQuery... You have to add maxlength to your input type=number
这是我使用 jQuery 的解决方案...您必须将 maxlength 添加到您的输入 type=number
$('body').on('keypress', 'input[type=number][maxlength]', function(event){
var key = event.keyCode || event.charCode;
var charcodestring = String.fromCharCode(event.which);
var txtVal = $(this).val();
var maxlength = $(this).attr('maxlength');
var regex = new RegExp('^[0-9]+$');
// 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9
if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){
return true;
}
// maxlength allready reached
if(txtVal.length==maxlength){
event.preventDefault();
return false;
}
// pressed key have to be a number
if( !regex.test(charcodestring) ){
event.preventDefault();
return false;
}
return true;
});
And handle copy and paste:
并处理复制和粘贴：
$('body').on('paste', 'input[type=number][maxlength]', function(event) {
//catch copy and paste
var ref = $(this);
var regex = new RegExp('^[0-9]+$');
var maxlength = ref.attr('maxlength');
var clipboardData = event.originalEvent.clipboardData.getData('text');
var txtVal = ref.val();//current value
var filteredString = '';
var combined_input = txtVal + clipboardData;//dont forget old data
for (var i = 0; i < combined_input.length; i++) {
if( filteredString.length < maxlength ){
if( regex.test(combined_input[i]) ){
filteredString += combined_input[i];
}
}
}
setTimeout(function(){
ref.val('').val(filteredString)
},100);
});
I hope it helps somebody.
我希望它可以帮助某人。
