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

Question

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

我已经在这里和这里找到了这个问题的多个答案

但他们都建议使用type="number"或使用相同的修复程序type="tel"

这些都不在我的codepen或项目中工作:(

在此输入图像描述

你看到我错过了什么吗？

Answer 1

它不会阻止您输入,但它会使输入无效.您可以看到,如果添加以下样式:

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

Answer 2

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

其次,HTML5输入验证类型无意阻止您输入无效值; 它们只是在输入后对输入进行验证.您作为开发人员应该通过使用CSS或JS来确定字段输入是否无效,并根据需要将其标记给用户.

如果你真的想防止非数字字符进入该字段,那么答案是肯定的,你需要使用Javascript(最好的选择是将它捕获到一个keyUp事件中).

您还应该小心确保您在客户端上执行的任何验证也在服务器上进行复制,因为任何客户端验证(无论是通过HTML5输入字段还是通过您自己的自定义JavaScript)都可以被恶意用户绕过.

在标记中执行此操作的麻烦在于,有太多边缘情况和太多可能的方法; 他们永远不会取悦所有人.例如,如果有人将字符串复制+粘贴到您的字段中,您会怎么做？如果它包含数字但不完全是数字,你如何处理？有些网站希望它完全被阻止,其他网站则接受数字字符.其他人接受数字直到第一个非数字......等等.正如我所说,很多很多边缘情况. (2认同)

Answer 3

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

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

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

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

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

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