HTML 属性:step

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

step 属性是值必须遵循的粒度数值,或关键字 any。此属性对数值输入类型有效,包括 datemonthweektimedatetime-localnumberrange 类型。

step 设置了点击上下旋转按钮、在范围上左右移动滑块以及验证不同日期类型时的步进间隔。如果没有明确指定,numberrangestep 默认为 1,日期/时间输入类型的 step 默认为 1 个单位类型(分、周、月、日)。值必须是正数(整数或浮点数)或特殊值 any,这意味着不隐含步进,允许任何值(除其他限制外,如 minmax)。

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">
time 60(秒) <input type="time" min="09:00" step="900">
datetime-local 60(秒) <input type="datetime-local" min="2019-12-25T19:30" step="900">
number 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 值,则增量最大为 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

示例

step 中 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 等。只有整数部分为奇数、小数部分为 0.2 的浮点数才有效。数字旋转器(如果存在)会生成 1.2 或更大的有效浮点数值,增量为 2。

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

参见客户端验证stepMismatch 以了解更多信息。

无障碍考虑

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

规范

Specification
HTML
# attr-input-step

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
step

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见