HTML 属性:step

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

¥The step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. It is valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types.

step 在单击向上和向下微调按钮、在范围内左右移动滑块以及验证不同日期类型时设置步进间隔。如果未明确包含,则 step 对于 numberrange 默认为 1,对于日期/时间输入类型默认为 1 种单位类型(分钟、周、月、日)。该值必须是正数 - 整数或浮点数 — 或特殊值 any,这意味着不暗示任何步进并且允许任何值(除非其他约束,例如 minmax)。

¥The step sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. If not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. The value must be a positive number - integer or float — or the special value any, which means no stepping is implied and any value is allowed (barring other constraints, such as min and max).

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

¥The default stepping value for number inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer. The default stepping value for time is 1 second, with 900 being equal to 15 minutes.

语法

¥Syntax

Default values for 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 1 秒) <input type="datetime-local" min="2019-12-25T19:30" step="7">
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 值(如果指定)。以下示例导致任何 10 或更大的偶数均有效:

¥If any is not explicitly set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the min value and increments of the step value, up to the max value, if specified. The following example results in any even integer, 10 or greater, being valid:

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

如果省略 step,则任何整数都有效,但像 4.2 这样的浮点数无效,因为 step 默认为 1。要使 4.2 有效:

¥If step is omitted, any integer is valid but floats like 4.2 are not valid as step defaults to 1. For 4.2 to be valid:

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

示例

¥Examples

min 对步骤的影响

¥min impact on step

即使不包括 step 属性,min 的值也定义有效值。这是因为 step 默认为 1。

¥The value of min defines valid values, even if the step attribute is not included. This is because step defaults to 1.

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

¥In this example, we add a big red border around invalid inputs:

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

然后我们定义一个最小值为 1.2、步长值为 2 的输入:

¥We then define an input with a minimum value of 1.2 and a step value of 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。

¥Valid values include 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, and so on. Only floats with an odd-numbered integer part and a decimal part of .2 are valid. The number spinner, if present, generates valid float values of 1.2 and greater, in increments of 2.

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

¥Note: When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the :invalid and :out-of-range pseudoclasses.

有关详细信息,请参阅 客户端验证stepMismatch

¥See Client-side validation and stepMismatch for more information.

无障碍问题

¥Accessibility concerns

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

¥Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the min attribute, ensure this minimum requirement is understood by the user. Providing instructions within the <label> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby.

规范

Specification
HTML Standard
# attr-input-step

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看