HTML5输入类型“数字”模式未被强制执行怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (54)

Chrome中的以下代码并未强制执行'.00 .00'格式,它允许任意格式的数字和无限小数位。当使用输入类型“文本”时,该模式工作正常,所以不确定这是否是“数字”问题?

<input type="number" step="1.00" min="0" pattern="\d+(\.\d{2})?" class="form-control" id="JobCost" name="jobcost">
提问于
用户回答回答于

这是一个相当古老的问题,但我试图理解同样的事情,而这正是我能够确定的。

首先,类型的输入number不使用该pattern属性,因此忽略它。

其次step属性不仅决定了升降机的步骤,还决定了有效值的集合。例如,如果将步骤设置为1.11,则有效值为1.11,2.23,3.33等等。如果您输入5.2并提交,它将以“请输入一个有效值,两个最接近的有效值是4.44和5.55”作出响应如果你没有进入这一步,它默认为1.然后它只允许“整数”(我使用报价,因为技术上它允许1.1.01.00等)。如果你想使用任何数字,请使用step="any"。我确实在某处看到,虽然chrome强制默认步骤为1,但firefox将允许小数(将其视为任何??)。

第三,如果没有嵌入到form标签中,这些都不起作用。

因此,如果您想强制使用2位小数,请使用type="number" step=".01"(了解您的上/下滴定器将增加/减少0.01)或使用type="text" pattern="\d+(\.\d{2})?"。请注意,在你的正则表达式中,它不允许,.23因为你有\d+。它会允许0.23。如果你想允许一个没有前导0的小数,那就\d+(\.\d{2})?改用它。它也只允许2位小数或无(拒绝1.1.2接受1.20)。如果这就是你想要的,那很好。只是想确定。

\d*(\.\d{0,2})?将接受小数点后2位的数字,但不能超过2位。它也会接受.,所以你必须根据你想要的来玩。

希望能帮助你或者其他像我一样碰到过的人。

扫码关注云+社区