HTML5:仅采用整数的数字输入类型？

Question

我正在使用jQuery Tools Validator,它通过jQuery实现HTML5验证.到目前为止它一直很好用,除了一件事.在HTML5规范中,输入类型"number"可以包含整数和浮点数.这看起来非常短视,因为当数据库字段是带符号的浮点数时,它只是一个有用的验证器(对于无符号整数,你必须回退到"模式"验证,因此松散的额外功能,如向上和向下箭头对于支持它的浏览器).是否有另一种输入类型或可能将输入限制为无符号整数的属性？我找不到任何,谢谢.

编辑

好的,我感谢您的时间和帮助,但我看到许多不值得的投票:D.将步骤设置为1不是答案,因为它不限制输入.您仍然可以在文本框中键入负浮点数.另外,我知道模式验证(我在原帖中提到过),但这不是问题的一部分.我想知道HTML5是否允许将"number"类型的输入限制为正整数值.对于这个问题,似乎答案是"不,不是".我不想使用模式验证,因为这在使用jQuery Tools验证时​​会产生一些缺点,但现在似乎规范不允许更简洁的方法来执行此操作.

Answer 1

https://www.w3.org/wiki/HTML/Elements/input/number

只有HTML才能实现最好的效果

<input type="number" min="0" step="1"/>

Answer 2

将step属性设置为1:

<input type="number" step="1" />

这在Chrome浏览器中似乎有些麻烦,所以它可能不是目前最好的解决方案.

更好的解决方案是使用pattern使用正则表达式匹配输入的属性:

<input type="text" pattern="\d*" />

\d是数字的正则表达式,*表示它接受多个数字.这是演示:http://jsfiddle.net/b8NrE/1/

Answer 3

使用JavaScript的简单方法:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

Answer 4

<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

使用此代码,文本字段限制的输入仅限于输入数字....模式是HTML5中可用的新属性

Patter属性doc

Answer 5

模式很好但是如果你想仅使用type ="text"将输入限制为数字,你可以使用oninput和一个正则表达式,如下所示:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

我为我而战:)

Answer 6

<input type="number" oninput="this.value = Math.round(this.value);"/>

Answer 7

这不仅适用于html5所有浏览器都能正常工作.试试这个

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"

Answer 8

最短

这是R. Yaghoobi 答案的大小改进

<input type="number" oninput="this.value|=0"/>

我们在这里使用“OR”运算符的标准简写，例如9 | 2 = 11 二进制：0b1001 | 0b1010 = 0b1011。该运算符首先以隐式方式将数字转换为整数，然后执行 OR。但因为或与零不会改变任何东西，所以数字被转换为整数。与非数字字符串进行“或”运算得出 0。

Answer 9

 <input type="number" min="0" step="1" pattern="\d+"/>

Answer 10

对于限制,模式总是优选的,尝试oninput并且min仅从1开始输入数字1

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >

Answer 11

只需将它放在您的输入字段中： onkeypress='return event.charCode >= 48 && event.charCode <= 57'

Answer 12

你试过step像这样将属性设置为1 吗？

<input type="number" step="1" />