HTML5 中有浮点输入类型吗？

小编典典

HTML5 中有浮点输入类型吗？

all

根据 html5.org，“数字”输入类型的“值属性，如果指定且不为空，则必须具有一个有效浮点数的值。”

然而，它只是（无论如何在最新版本的 Chrome 中），一个带有整数的“updown”控件，而不是浮点数：

<input type="number" id="totalAmt"></input>

是否有 HTML5 原生的浮点输入元素，或者有一种方法可以使数字输入类型与浮点数一起使用，而不是整数？还是我必须求助于 jQuery UI 插件？

阅读 145

2022-02-28

共1个答案

小编典典

该number类型有一个step值控制哪些数字是有效的（以及max和min），默认为1。该值也被用于步进按钮的实现（即按下增加step）。

只需将此值更改为适当的值。对于金钱，可能需要保留小数点后两位：

<input type="number" step="0.01">

min=0（如果它只能是积极的，我也会设置）

如果您希望允许使用任意数量的小数位，您可以使用step="any"（尽管对于货币，我建议坚持使用0.01）。在 Chrome 和 Firefox
中，使用any. （感谢 Michal Stefanow
的回答指出any，并在此处查看相关规范）

这是一个游乐场，展示了各种步骤如何影响各种输入类型：

<form>

  <input type=number step=1 /> Step 1 (default)<br />

  <input type=number step=0.01 /> Step 0.01<br />

  <input type=number step=any /> Step any<br />

  <input type=range step=20 /> Step 20<br />

  <input type=datetime-local step=60 /> Step 60 (default)<br />

  <input type=datetime-local step=1 /> Step 1<br />

  <input type=datetime-local step=any /> Step any<br />

  <input type=datetime-local step=0.001 /> Step 0.001<br />

  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />

  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />

  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />

</form>

像往常一样，我将添加一个简短的说明：请记住，客户端验证只是为用户提供便利。您还必须在服务器端进行验证！

2022-02-28