Html 为什么 <input type="number" maxlength="3"> 在 Safari 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9361193/
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
why is <input type="number" maxlength="3"> not working in Safari?
提问by Jules
I like to have an input with maximum 3 characters. In Firefox everything works fine I can only write 3 numbers inside the input - but in safari you can write a lot of numbers inside.
我喜欢输入最多 3 个字符。在 Firefox 中一切正常，我只能在输入中写入 3 个数字 - 但在 safari 中，您可以在其中写入很多数字。
You can test it in both browsers with this: http://flowplayer.org/tools/demos/validator/custom-validators.htm
您可以在这两个浏览器中测试它：http: //flowplayer.org/tools/demos/validator/custom-validators.htm
For now I realized it with a validate plugin - but just for interest I like to know why isn't this working?
现在我用验证插件实现了它 - 但只是为了兴趣，我想知道为什么这不起作用？
EDIT:
编辑：
with this it's working
有了这个它的工作
<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
采纳答案by Jules
I've accomplished it with:
我已经完成了：
<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
and then in JavaScript I prevented the letters:
然后在 JavaScript 中我阻止了这些字母：
$("#myField").keyup(function() {
$("#myField").val(this.value.match(/[0-9]*/));
});
回答by Viktor Karpyuk
You may try to user type="text" and oninput as below. This will let the numbers only.
您可以尝试用户 type="text" 和 oninput 如下。这只会让数字。
<input type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
回答by smhnkmr
Basically Maxand Minproperties are not supported in Safari browser yet. I can see no flaw in the syntax. Are u using the Safari version 1.3+? or below that? Because maxlengthproperty is supported from safari 1.3+.
基本上，Safari 浏览器还不支持Max和Min属性。我看不出语法上有任何缺陷。你使用的是 Safari 1.3+ 版本吗？或低于？因为safari 1.3+ 支持maxlength属性。
回答by Travis Peterson
I used something very similar to @Jules answer except his won't allow the use of keys like shift+home. Since we're validating numbers I just used isNaN in the keyup function.
我使用了与@Jules 答案非常相似的东西，除了他不允许使用 shift+home 之类的键。由于我们正在验证数字，我只是在 keyup 函数中使用了 isNaN。
$("#myField").keyup(function() {
var e = $("#myField");
if(isNaN(e.val())){
e.val(e.val().match(/[0-9]*/));
}
});
With...
和...
<input id="#myField" inputmode="numeric" maxlength="3" pattern="([0-9]{3})" type="text" />
回答by Surya R Praveen
Using onKeyDown length can be restricted
可以限制使用 onKeyDown 长度
<input type="number" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
Happy Coding :)
快乐编码:)
回答by Himanshu Raj
You can not use maxlength and minlength function with input type=”number”
您不能使用输入类型 =“数字”的 maxlength 和 minlength 函数
Instead one can use regexp to solve this problem
(?=.*[0-9])- must contain only digit
相反，可以使用正则表达式来解决这个问题
(?=.*[0-9])- 必须只包含数字
{10,10}- min length and max length must be 10. You can change these values
{10,10}- 最小长度和最大长度必须为 10。您可以更改这些值
<input type="number" pattern="(?=.*[0-9]).{10,10}" />
Use
用
pattern="(?=.*[0-9]).{10,10}"
回答by Subhabrata Banerjee
Here is a more simple solution. For me it worked
这是一个更简单的解决方案。对我来说它有效
<input type="number" id="cvv">
$("#cvv").on("keypress", function(evt) {
var keycode = evt.charCode || evt.keyCode;
if (keycode == 46 || this.value.length==3) {
return false;
}
});
the JS block will prevent the "."(dot) so one cant enter float. We are keeping the input type as number so it will be only number as input. If the value length is 3 then it will return false, so input length also restricted.
JS 块将阻止“.”（点），因此无法输入浮点数。我们将输入类型保持为数字，因此它只会作为输入数字。如果值长度为 3，则返回 false，因此输入长度也受到限制。
回答by jwang
https://jsfiddle.net/zxqy609v/8/
https://jsfiddle.net/zxqy609v/8/
function fixMaxlength(inputNumber) {
var maxlength = $(inputNumber).attr("maxlength");
$(inputNumber).keyup(function (evt) {
this.value = this.value.substring(0, maxlength);
this.value = this.value.replace(/\D/g, '');
});
}
