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 表格僅在瀏覽器中載入

另請參閱