HTML maxlength 属性不适用于 chrome 和 safari？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9555143/
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
HTML maxlength attribute not working on chrome and safari?
提问by Tool
<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius">
This is my HTML, taken with firebug (on chrome).
这是我的 HTML，使用 firebug（在 chrome 上）。
I am allowed to write as much as characters as I want in the form field - in Chrome and Safari.
在 Chrome 和 Safari 中，我可以在表单字段中输入任意数量的字符。
When on Firefox or IE10, the limit is fine.
在 Firefox 或 IE10 上，限制没问题。
I haven't found this issue around on the net.
我在网上没有发现这个问题。
Note: type="number" - not text.
注意：type="number" - 不是文本。
Anyone saw this issue before?
以前有人见过这个问题吗？
采纳答案by Hymantheripper
Use the max attribute for inputs of type="number". It will specify the highest possible number that you may insert
对 的输入使用 max 属性type="number"。它将指定您可以插入的最大可能数字
<input type="number" max="999" />
if you add both a max and a min value you can specify the range of allowed values:
如果同时添加最大值和最小值，则可以指定允许值的范围：
<input type="number" min="1" max="999" />
See this example
看这个例子
EDIT
编辑
If, for user experience, you would prefer the user not to be able to enter more than a certain number, use Javascript/jQuery, as seen in this example
如果为了用户体验，您希望用户不能输入超过某个数字，请使用 Javascript/jQuery，如本例所示
回答by Neha Jain
Max length will not work with <input type="number"the best way i know is to use oninput event 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 keithwyland
The maxlength attribute does not apply to an input of type="number"
maxlength 属性不适用于 type="number" 的输入
From W3 HTML5 spec concerning type="number"
来自 W3 HTML5 规范关于 type="number"
The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, size, src, and width.
以下内容属性不得指定且不适用于元素：accept、alt、checked、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、maxlength、multiple、pattern、size、src 和 width。
Source: http://dev.w3.org/html5/spec/Overview.html#number-state-type-number(under Bookkeeping details)
来源：http: //dev.w3.org/html5/spec/Overview.html#number-state-type-number（在簿记详细信息下）
In FF and IE, the input is falling back to be a text input and therefore, maxlength applies to the input. Once FF and IE implement type="number", they should also implement it in a way where maxlength does not apply.
在 FF 和 IE 中，输入回退为文本输入，因此 maxlength 适用于输入。一旦 FF 和 IE 实现 type="number"，他们也应该以 maxlength 不适用的方式实现它。
回答by zen.c
For those who still can't get it to work... Try this to fire up the fatter number pads:
对于那些仍然无法让它工作的人......试试这个来启动更胖的数字键盘：
<input type="number" name="no1" maxlength="1" size="1" max="9" pattern="[0-9]*" />
And the js:
和js：
$('input[name="no1"]').keypress(function() {
if (this.value.length >= 1) {
return false;
}
});
回答by user3325657
Here is an example using type="number"and maxlength, that works with Chrome, IE and others. Hope it helps!
这是一个使用type="number"and的例子maxlength，它适用于 Chrome、IE 和其他。希望能帮助到你！
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function test(id, event) {
var element = $("#" + id);
var len = element.val().length + 1;
var max = element.attr("maxlength");
var cond = (46 < event.which && event.which < 58) || (46 < event.keyCode && event.keyCode < 58);
if (!(cond && len <= max)) {
event.preventDefault();
return false;
}
}
</script>
</head>
<body>
<input id="test" size="3" type="number" maxlength="3" onkeypress="test(this.id, event)">
</body>
</html>
回答by m02ph3u5
Speaking of HTML 4.01 there is no such type as "number". Speaking of HTML 5FF and IE do not yet know the number type if http://www.w3schools.com/html5/html5_form_input_types.aspis correct.
说到 HTML 4.01，没有“数字”这样的类型。如果http://www.w3schools.com/html5/html5_form_input_types.asp是正确的，说到HTML 5FF 和 IE 还不知道数字类型。
/edit: So FF and IE will probably fallback to textand this is why maxlength will work.
/edit：所以 FF 和 IE 可能会回退到文本，这就是 maxlength 会起作用的原因。
回答by Arash Younesi
I solved problem using this jQuerycodes:
我使用以下jQuery代码解决了问题：
$('input[type="number"]').on('keypress', function (e) {
var maxlength = $(this).prop('maxlength');
if (maxlength !== -1) { // Prevent execute statement for non-set maxlength prop inputs
var length = $(this).val().trim().length;
if (length + 1 > maxlength) e.preventDefault();
}
});
Set maxlengthattribute for every input[type="number"]that you want, just like text inputs.
maxlength为input[type="number"]您想要的每个设置属性，就像文本输入一样。
