使用步进值的解决方案

“数字”类型字段旨在用于数值。
它有一些有用的属性,例如 min、max 和 step。
对于数字字段,有效值应该是指定的最小值和最大值之间的浮点数。
如果设置了 step 属性,则有效值将被 step 值整除。

step 属性将控制哪些值是有效的。
因此,将此值更改为我们需要的任何值。
某些浏览器会添加切换按钮以按步骤指定的值增加/减少值。
如果未指定值,则默认设置为 1.

使用 type="number" 及其 min、max 和 step 属性的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <input type="number" min="5" max="25" step="5">
    </form>
  </body>
</html>

此处,有效输入将是 5、10、15、20 和 25,任何其他值都将被拒绝。

对于任何浮点数,请使用 type="number",因为它被广泛支持并且还有助于防止随机输入。

我们可以在 step 中使用“any”值以允许任意数量的小数位。
让我们看一个例子来了解不同的步骤如何影响不同的输入类型。

将 step 属性用于各种输入类型的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <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>
  </body>
</html>
哪个是 HTML5 中的 Float 输入类型
日期:2020-06-02 22:15:14 来源:oir作者:oir