使用步进值的解决方案
“数字”类型字段旨在用于数值。
它有一些有用的属性,例如 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
