使用步进值的解决方案
“数字”类型字段旨在用于数值。
它有一些有用的属性,例如 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>
日期:2020-06-02 22:15:14 来源:oir作者:oir