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

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

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

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

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

最佳答案

number 类型有一个 step 值来控制哪些数字是有效的(以及 maxmin) ,默认为 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>


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

https://stackoverflow.com/questions/19011861/

相关文章:

css - 如何使用 CSS 轻松地将

水平居中?

html - 如何垂直对齐 div 中的元素?

html - 搜索引擎如何处理 AngularJS 应用程序?

html - Bootstrap 3 中的 sr-only 是什么?

javascript - 如何使用 .css() 应用 !important?

html - 有没有办法改变输入类型 ="date"格式?

html - 表格内的文本对齐类

javascript - 将 HTML Canvas 捕获为 gif/jpg/png/pdf?

jquery - 按 Enter 阻止用户提交表单

html - 如何将我的 div 放在其容器的底部?