HTML5 中有浮动输入类型吗？

Question

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

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

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

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

原文由 B. Clay Shannon-B. Crow Raven 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

The number type has a step value controlling which numbers are valid (along with max and min ), which defaults to 1 。该值也被步进按钮的实现使用（即按下增加 step ）。

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

 <label for="totalAmt">Total Amount</label>
<input type="number" step="0.01" id="totalAmt">

（我也会设置 min=0 如果它只能是正数）

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

这是一个展示各种步骤如何影响各种输入类型的 playground：

 <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>

---

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

原文由 Dave 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

通过： http ://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

但是，如果您希望所有数字都有效，整数和小数都一样怎么办？在这种情况下，将步骤设置为“任何”

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

---

在 Chrome 中为我工作，未在其他浏览器中测试。

原文由 Michal Stefanow 发布，翻译遵循 CC BY-SA 3.0 许可协议