Html 如何在没有 Javascript 的情况下仅强制输入数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17999067/
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 force only numbers in a input, without Javascript?
提问by Leon Gaban
CodePen: http://codepen.io/leongaban/pen/hbHsk
代码笔：http://codepen.io/leongaban/pen/hbHsk
I've found multiple answers to this question on stack hereand here
However they all suggest the same fix, using type="number"or type="tel"
然而，他们都建议相同的修复，使用type="number"或type="tel"
None of these are working in my codepen or project :(
这些都不适用于我的 codepen 或项目:(
Do you see what I'm missing?
你看到我缺少什么了吗？
回答by Tim Mac
It doesn't stop you from typing, but it does invalidate the input. You can see that if you add the following style:
它不会阻止您输入，但会使输入无效。你可以看到，如果你添加以下样式：
input:invalid {
border:1px solid red;
}
回答by Spudley
Firstly, what browsers are you using? Not all browsers support the HTML5 input types, so if you need to support users who might use old browsers then you can't rely on the HTML5 input types working for all users.
首先，您使用的是什么浏览器？并非所有浏览器都支持 HTML5 输入类型，因此如果您需要支持可能使用旧浏览器的用户，那么您不能依赖适用于所有用户的 HTML5 输入类型。
Secondly the HTML5 input validation types aren't intended to do anything to stop you entering invalid values; they merely do validation on the input once it's entered. You as the developer are supposed to handle this by using CSS or JS to determine whether the field input is invalid, and flag it to the user as appropriate.
其次，HTML5 输入验证类型不会阻止您输入无效值；他们只是在输入后对输入进行验证。您作为开发人员应该通过使用 CSS 或 JS 来确定字段输入是否无效，并根据需要将其标记给用户。
If you actually want to prevent non-digit characters from ever getting into the field, then the answer is yes, you need to use Javascript (best option is to trap it in a keyUpevent).
如果您真的想防止非数字字符进入该字段，那么答案是肯定的，您需要使用 Javascript（最好的选择是在keyUp事件中捕获它）。
You should also be careful to ensure that any validation you do on the client is also replicated on the server, as any client-side validation (whether via the HTML5 input fields or via your own custom javascript) can be bypassed by a malicious user.
您还应该小心确保您在客户端上所做的任何验证也被复制到服务器上，因为任何客户端验证（无论是通过 HTML5 输入字段还是通过您自己的自定义 javascript）都可能被恶意用户绕过。
回答by Majo0od
Firstly, in your Codepen, your inputs are not fully formatted correctly in a form.... Try adding the <form></form>tags like this:
首先，在您的 Codepen 中，您的输入格式未完全正确格式化……尝试添加如下<form></form>标签：
<form>
<lable>input 1 </lable>
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' />
<br/>
<lable>input 2 </lable>
<input type="number" pattern='[0-9]{10}'/>
<br/>
<lable>input 3 </lable>
<input type= "text" name="name" pattern="[0-9]" title="Title"/>
</form>回答by Beavatron Prime
I use a dirty bit of JS inline, it's triggered upon paste/keying (input).
我使用了一些脏的 JS 内联，它是在粘贴/键控（输入）时触发的。
Within your input tag add the following:
在您的输入标签中添加以下内容：
oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
All it's doing is replacing any character not 0-9 with nothing.
它所做的只是用空替换任何不是 0-9 的字符。
I've written a tiny demo which you can try below:
我写了一个小演示，你可以在下面尝试：
Numbers only: <input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>回答by Andre Lombaard
Just add a check to the onkeypressevent to make sure that the no alphanumeric characters can be added
只需在onkeypress事件中添加一个检查以确保不能添加字母数字字符
<input
type="text"
placeholder="Age"
autocomplete="off"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
maxlength="10"
/>
