HTML 属性：step

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

step 属性是一个数字，用于指定值必须遵守的粒度，或者使用关键字 any。它适用于数字输入类型，包括 date、month、week、time、datetime-local、number 和 range 类型。

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

只有与步长基数相差整数倍步长的值才有效。步长基数是 min（如果已指定），否则是 value，如果两者均未提供，则为 0（但 week 类型除外，其默认步长基数为 −259,200,000，代表 1970-W01 周的开始）。

语法

step 的默认值
输入类型	值	示例
日期	1 (天)	`<input type="date" min="2019-12-25" step="1">`
月份	1 (月)	`<input type="month" min="2019-12" step="12">`
周	1 (周)	`<input type="week" min="2019-W23" step="2">`
时间	60 (秒)	`<input type="time" min="09:00" step="900">`
datetime-local	60 (秒)	`<input type="datetime-local" min="2019-12-25T19:30" step="900">`
数字	1	`<input type="number" min="0" step="0.1" max="10">`
range	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 的值定义了有效值，即使 step 属性未包含。这是因为 number 输入类型的 step 默认为 1。

在此示例中，我们在无效输入周围添加了粗红边框。

css

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

然后我们定义一个最小值（min）为 1.2，步长（step）值为 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 的浮点数才有效。如果存在数字微调器，它会以 2 为增量生成大于等于 1.2 的有效浮点值。

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

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

可访问性考虑

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