我正在使用jQuery工具验证器,它通过jQuery实现HTML5验证。

到目前为止一切都很顺利,除了一件事。在HTML5规范中,输入类型“number”既可以是整数也可以是浮点数。

这似乎是非常短视的,因为它只在数据库字段是带符号的浮点数时才有用(对于无符号整数,您将不得不退回到模式验证,从而失去支持它的浏览器的上下箭头等额外功能)。

是否有另一种输入类型或属性将输入限制为无符号整数?

我一个也找不到。


将步长设置为1并不是答案,因为它不限制输入。您仍然可以在文本框中键入一个负浮点数。

此外,我知道模式验证(我在最初的文章中提到过),但这不是问题的一部分。

我想知道HTML5是否允许将“数字”类型的输入限制为正整数值。对于这个问题,答案似乎是“不,没有关系”。

我不想使用模式验证,因为这会在使用jQuery工具验证时造成一些缺陷,但现在看来,规范不允许使用更清晰的方式来实现这一点。


当前回答

在Future™(请参阅Can I Use)中,在向您提供键盘的用户代理上,您可以将文本输入限制为仅使用输入[inputmode]的数字。

其他回答

也许它不适合每一个用例,但是

<input type="range" min="0" max="10" />

能做一件很好的工作:小提琴。

检查文档。

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

使用这段代码,文本字段的输入限制为只能输入数字。Pattern是HTML 5中的新属性。

模式属性文档

简短,用户友好

该解决方案支持制表符,退格,进入,减号直观的方式

<input type=text onkeypress=“return /^-?[0-9]*$/.test(this.value+event.key)”>

但是,它不允许改变已经键入的数字为减号,不处理复制粘贴的情况。

作为替代,您可以使用基于R. Yaghoobi答案的解决方案,它允许放置减号和处理复制粘贴情况,但当用户输入禁止字符时,它会删除整数

<input type=text oninput="this. "Value = [",'-'].includes(this.value) ?这一点。值:this.value|0">

注意:以上内联解决方案仅用于小型项目。在其他情况下,它们在函数中不透明,并移动到你的js文件。

大多数答案都过时了。

以下不再工作:

<!-- It doesn't invalidate decimals when using validators -->
<input type="number" min="0" step="1" />

下面的解决方案更加优雅和直接,并且适用于截至2022年初的所有最新浏览器。

<!-- It DOES invalidate decimals when using validators -->
<input type="number" pattern="\d*" />

是的,HTML5可以。试试下面的代码(w3school):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

看到最小和最大参数了吗?我用Chrome 19(正常)和Firefox 12(不正常)试了试。