all

HTML5 中有浮点输入类型吗?

发布于 2022-03-22 23:23:46

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

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

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

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

关注者
0
被浏览
57
1 个回答
  • 面试哥
    面试哥 2022-03-22
    为面试而生,有面试问题,就找面试哥。

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

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



推荐阅读
知识点
面圈网VIP题库

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看