Javascript html模式只接受数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47769289/
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 pattern to only accept numbers
提问by oderfla
I have this simple html:
我有这个简单的 html：
<input type="text"
placeholder="onlynumbers"
name="onlynumbers"
pattern="\d{1,5}"
maxlength="5">
I need to restrict the number of characters to 5. It works. But I still can type other characters than numbers. I have tried various pattern, for example:
我需要将字符数限制为 5。它有效。但我仍然可以输入数字以外的其他字符。我尝试了各种模式，例如：
pattern = "[0-9]"
But it is still possible to type other characters than digits.
但是仍然可以输入数字以外的其他字符。
If I change the typeattribute to number, then only digits are accepted in the input field but the maxlengthattribute doesn't work. I can enter as many digits as I want. I heard this was a bug in Chrome. Is that the problem?
如果我将type属性更改为number，则输入字段中只接受数字，但该maxlength属性不起作用。我可以输入任意数量的数字。我听说这是 Chrome 中的一个错误。这是问题吗？
Is there a cross-browser way to fulfil these requirements:
是否有跨浏览器的方式来满足这些要求：
An input field (text or number, no matters) that only accept digits and doesn't let the user enter more than 5 digits.
仅接受数字且不允许用户输入超过 5 位数字的输入字段（文本或数字，无关紧要）。
回答by darshan
<input type="text" name="country_code" pattern="[0-9]+" title="please enter number only" required="required">
回答by Shreevardhan
Use maxinstead of maxlengthwith input type="number". For example, to specify max length of 5 digits, use
使用max代替maxlengthwith input type="number"。例如，要指定最大长度为 5 位数字，请使用
<input type="number" max="99999" />
回答by Shreevardhan
Use This Code snippets to restrict input to only 5 digits and restrict to letters with the help of JavaScript make thing easier instead of JQuery
使用此代码片段将输入限制为仅 5 位数字并在 JavaScript 的帮助下限制为字母使事情变得更容易而不是 JQuery
function isNumber(evt)
{
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true; }<!DOCTYPE html>
<html>
<head>
<title>Restrict Number</title>
<script src="number.js"></script>
</head>
<body>
<form>
Number:<input type="text" maxlength="5" onkeypress=" return isNumber(event)"/>
</form>
</body>
</html>回答by Uzair Nadeem
Why not you use number input type?
为什么不使用数字输入类型？
<input type="number" name="onluNumbers" min="1" max="99999">回答by Springer F
You can use the Below jQuery code to check with regex (For old browsers that does not support the type=number input pattern)
您可以使用下面的 jQuery 代码来检查正则表达式（对于不支持 type=number 输入模式的旧浏览器）
$(function(){
$("input[name='onlynumbers']").on('input', function (e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="onlynumbers" name="onlynumbers" maxlength="5">