html - HTML5 中有浮点输入类型吗？

Question

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

然而，它只是(在最新版本的 Chrome 中，无论如何)，一个带有整数的“updown”控件，而不是 float :

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

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

Answer 1

number 类型有一个 step 值来控制哪些数字是有效的(以及 max 和 min) ，默认为 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 和 see the relevant spec here 的回答)

这是一个展示各种步骤如何影响各种输入类型的 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>

---

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