Question

所以我有一个现有的HTML页面，其中包含信用卡最后4位数的字段：

<input value="" name="Last4ofCC" maxlength="4" id="Last4ofCC1">

效果很好，但是出现了一个功能请求，使其成为一个数字字段，不允许使用非数字字符。

起初我想过插入一些Javascript，但后来我想，为什么不使用HTML5元素。我改为：

<input type="number" value="" name="Last4ofCC" max="4" id="Last4ofCC1">

但它不仅仍然允许非数字字符，max属性也不起作用！我在FireFox 8上测试它，所以不确定问题是什么。

有谁知道我在这里做错了什么？

Answer 1

除了更改输入类型之外，您还需要在页面顶部添加正确的文档类型。

<!DOCTYPE html>

但是，它不会按照你的想法去做。将输入设置为type="number"几乎只会让您在侧面找到旋转器，并告诉表单它应该应该。如果您想确保只输入数字，则需要执行正则表达式，例如密钥上的/^\d+$/。

有关HTML5

的更多信息

Answer 2

是的，您可以将HTML5功能添加到现有页面。至少目前，浏览器对它们的支持独立于您在页面开头可能有或没有的任何doctype内容。

然而，使用type="number"读取四位数可能不是一个好主意。它用于读取数字数据，例如，它可以很高兴地接受42，而不需要任何更多的数字。而且，用户界面甚至可能使用户迷惑。但是，如果您使用type="number"，则应在此案例中设置min="0"和max="9999"。

更好的HTML5结构是pattern="[0-9]{4}" required。它应该对输入进行检查，检查它是否包含正好四位数。即使禁用JavaScript，也会发生这种情况。

由于浏览器支持仍然相当有限，因此使用JavaScript检查也是一个好主意，以方便用户。

Answer 3

'max'表示允许的最大值，而不是最大字符数。

Answer 4

杰森的回答大多是正确的。但是，除非用户需要其他帮助，否则不应对keyup进行验证。我是h5Validate的作者。在提高大型生产购物车转化率的过程中，我们发现如果用户在他们仍在尝试输入数字时看到验证错误消息，则会感到困惑。

h5Validate首先在更改时运行验证，如果值无效，它将添加keyup以帮助用户在每次击键时更正字段。这似乎是一个小小的挑剔，但它的差异使得大规模购物车系统每年的收入达到数百万美元。

Answer 5

据我所知，Firefox还不支持这些，http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29。尝试使用Chrome浏览器查看效果。

Answer 6

您可以在此处查看Firefox的最新表单支持（它应该是支持）：

同时退房：

这个jQuery插件会增加对所有浏览器的支持。这是一种仍然使用HTML5语法的安全方法：

祝你好运！