HTML 属性：step

step 属性是一个数字，指定值必须遵循的粒度或关键字 any。它对数字输入类型有效，包括 日期、月份、星期、时间、本地日期和时间、数字 和 范围 类型。

step 设置点击向上和向下微调按钮、左右移动范围滑块以及验证不同日期类型时的步进间隔。如果未明确包含，则 step 默认为 number 和 range 的 1，以及日期/时间输入类型的 1 个单位类型（分钟、星期、月份、日期）。该值必须为正数 - 整数或浮点数 - 或特殊值 any，这意味着不暗示步进，并且允许任何值（不包括其他约束，例如 min 和 max）。

number 输入的默认步进值为 1，仅允许输入整数，除非步进基数不是整数。time 的默认步进值为 60 秒，其中 900 等于 15 分钟。

语法

step 的默认值
输入类型 值 示例
date 1（天） <input type="date" min="2019-12-25" step="1">
month 1（月） <input type="month" min="2019-12" step="12">
week 1（周）

 <input type="week" min="2019-W23" step="2">
时间 60（秒） <input type="time" min="09:00" step="900">
日期时间-本地 60（秒） <input type="datetime-local" min="2019-12-25T19:30" step="900">
数字 1 <input type="number" min="0" step="0.1" max="10">
范围 1 <input type="range" min="0" step="2" max="10">

如果未明确设置any，则number、日期/时间输入类型和range输入类型的有效值等于步进的基础 - min值和步进值的增量，直到max值（如果指定）。以下示例导致任何偶数整数（10或更大）均有效

html
<input type="number" min="10" step="2" />

如果省略step，则任何整数均有效，但浮点数（如4.2）无效，因为step默认为1。要使4.2有效

  • step必须设置为any、0.1或0.2，
  • 或者min值必须是结尾为.2的数字，例如0.2、1.2或-5.2。

示例

min对步进的影响

即使未包含step属性，min的值也定义有效值。这是因为对于number输入类型，step默认为1。

在此示例中，我们在无效输入周围添加了一个大红色边框

css
input:invalid {
  border: solid red 3px;
}

然后，我们定义一个最小值为1.2且步进值为2的输入

html
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2" />

有效值包括1.2、3.2、5.2、7.2、9.2、11.2等。只有整数部分为奇数且小数部分为.2的浮点数有效。数字微调器（如果存在）会生成大于或等于1.2的有效浮点值，增量为2。

注意：当用户输入的数据不符合步进配置时，该值在约束验证中被视为无效，并将匹配:invalid和:out-of-range伪类。

有关更多信息，请参阅客户端验证和stepMismatch。

无障碍问题

提供说明以帮助用户了解如何填写表单并使用各个表单控件。指示任何必填和可选输入、数据格式以及其他相关信息。使用min属性时，请确保用户理解此最低要求。在<label>中提供说明可能就足够了。如果在标签之外提供说明（允许更灵活的定位和设计），请考虑使用aria-labelledby或aria-describedby。

规范

规范
HTML 标准
# attr-input-step

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅