如何在没有Javascript的情况下仅强制输入数字？答案

【问题标题】：How to force only numbers in a input, without Javascript?如何在没有Javascript的情况下仅强制输入数字？
【发布时间】：2013-08-02 16:07:30
【问题描述】：

CodePen：http://codepen.io/leongaban/pen/hbHsk

我在堆栈here 和here 上找到了这个问题的多个答案

但是他们都建议使用相同的修复方法，使用 type="number" 或 type="tel"

这些都不适用于我的代码笔或项目:(

你知道我错过了什么吗？

【问题讨论】：

似乎您需要一些客户端脚本来拦截非数字并拒绝它们。
你用的是什么浏览器？ type="number" 应该可以。到目前为止，要在所有浏览器中只强制使用数字，您将需要 javascript 验证，如果您确定用户只使用现代浏览器，您可以只使用 html5
我同时使用 Chrome（主浏览器）和 FireFox...它们仍然允许我输入字母

标签： html text input

【解决方案1】：

首先，在您的 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>

【讨论】：

这在 Internet Explorer 中不起作用。任何适用于 IE、Chrome 和 Safari 的解决方案？

【解决方案2】：

只需在onkeypress 事件中添加一个检查，以确保不能添加任何字母数字字符

 <input 
     type="text" 
     placeholder="Age" 
     autocomplete="off" 
     onkeypress="return event.charCode >= 48 && event.charCode <= 57" 
     maxlength="10" 
 />

【讨论】：

这会禁用退格键
正是我所需要的，它适用于最新版本的 IE 11、Firefox 和 Chrome

【解决方案3】：

我使用了一些肮脏的 JS 内联代码，它是在粘贴/键入（输入）时触发的。

在您的输入标签中添加以下内容：

oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"

它所做的只是用空替换任何不是 0-9 的字符。

我编写了一个小演示，您可以在下面尝试：

Numbers only: &lt;input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"&gt;&lt;/input&gt;

【讨论】：

由于某种原因，当我按下任何非数字字符时，这会清除整个字段。
@AlexanderSuraphel - 这是使用上面的“运行代码 sn-p”按钮的结果吗？？

【解决方案4】：

首先，您使用的是什么浏览器？并非所有浏览器都支持 HTML5 输入类型，因此如果您需要支持可能使用旧浏览器的用户，那么您不能依赖适用于所有用户的 HTML5 输入类型。

其次，HTML5 输入验证类型并非旨在阻止您输入无效值；他们只是在输入后对输入进行验证。作为开发者，您应该使用 CSS 或 JS 来确定字段输入是否无效，并酌情将其标记给用户。

如果您真的想防止非数字字符进入该字段，那么答案是肯定的，您需要使用 Javascript（最好的选择是将其捕获在 keyUp 事件中）。

您还应注意确保您在客户端上执行的任何验证也会在服务器上复制，因为任何客户端验证（无论是通过 HTML5 输入字段还是通过您自己的自定义 javascript）都可能被恶意用户。

【讨论】：

谢谢，现在是时候寻找最好的 javascript / jQuery 方法来处理这个问题了……恕我直言，这应该在标记级别上得到处理。也许是 HTML6 :)
在标记中这样做的问题是有太多的边缘情况和太多可能的方法；他们永远不会取悦所有人。例如，如果有人将字符串复制+粘贴到您的字段中，您会怎么做？如果它包含数字但不完全是数字，您如何处理？有些网站希望它完全被屏蔽，有些则接受数字字符。其他人接受数字直到第一个非数字......等等。正如我所说，很多边缘情况。

【解决方案5】：

它不会阻止您输入，但会使输入无效。添加如下样式可以看到：

input:invalid {
  border:1px solid red;
}

【讨论】：

啊，所以你需要一个 Javascript 修复这个吗？
阻止他们实际输入字母？我相信是的。