HTMLInputElement: stepUp() 方法
HTMLInputElement.stepUp() 方法會根據 step 屬性的值，或者在未顯式設定 step 屬性時使用預設的 step 值，來增加數字型別 <input> 元素的 value。呼叫該方法時，value 會增加 (step * n)，其中 n 在未指定時預設為 1，而 step 在未指定時預設為 step 的預設值。
| 輸入型別 | 預設 step 值 | 示例 step 宣告 |
|---|---|---|
| 日期 | 1 (天) |
7 天（一週）增量<input type="date" min="2019-12-25" step="7">
|
| 月份 | 1 (月) |
12 個月（一年）增量<input type="month" min="2019-12" step="12">
|
| 周 | 1 (周) |
兩週增量<input type="week" min="2019-W23" step="2">
|
| 時間 | 60 (秒) |
900 秒（15 分鐘）增量<input type="time" min="09:00" step="900">
|
| datetime-local | 1 (天) |
同一週中的同一天<input type="datetime-local" min="019-12-25T19:30" step="7">
|
| 數字 | 1 |
0.1 增量<input type="number" min="0" step="0.1" max="10">
|
| range | 1 |
增量為 2<input type="range" min="0" step="2" max="10">
|
呼叫該方法時，它會根據 step 屬性的值乘以引數，在表單控制元件設定的限制內改變表單控制元件的值。如果未傳遞引數，引數的預設值為 1。該方法不會導致值超出設定的 max 值，也不會違反 step 屬性設定的限制。
如果呼叫 stepUp() 方法之前的值無效——例如，如果不符合 step 屬性設定的限制——呼叫 stepUp() 方法將返回一個符合表單控制元件限制的值。
如果表單控制元件的性質非時間、日期或數字，因此不支援 step 屬性（請參閱上表支援的輸入型別列表），或者 step 值設定為 any，則會丟擲 InvalidStateError 異常。
語法
stepUp()
stepUp(stepIncrement)
引數
stepIncrement可選-
一個數值。如果未傳遞引數，
stepIncrement預設為1。
返回值
無（undefined）。
示例
點選此示例中的按鈕以增加 number 輸入型別的值
HTML
<p>
<label for="theNumber">
Enter a number between 0 and 400 that is divisible by 5:
</label>
<input type="number" step="5" id="theNumber" min="0" max="400" />
</p>
<p>
<label>
Enter how many values of step you would like to increment by or leave it
blank:
</label>
<input type="number" step="1" id="incrementInput" min="0" max="25" />
</p>
<input type="button" value="Increment" id="theButton" />
JavaScript
/* make the button call the function */
const button = document.getElementById("theButton");
button.addEventListener("click", () => {
stepOnUp();
});
function stepOnUp() {
let input = document.getElementById("theNumber");
let val = document.getElementById("incrementInput").value;
if (val) {
/* increment with a parameter */
input.stepUp(val);
} else {
/* or without a parameter. Try it with 0 */
input.stepUp();
}
}
CSS
input:invalid {
border: red solid 3px;
}
結果
請注意，如果您不向 stepUp 方法傳遞引數，它將預設為 1。任何其他值都是 step 屬性值（在本例中為 5）的倍數。如果您將 4 作為 stepIncrement 傳遞，輸入將 stepUp 4 * 5，即 20。如果引數為 0，數字將不會增加。stepUp 不允許輸入超出範圍，在本例中，當達到 400 時停止，並將傳遞的浮點數向下取整。
嘗試將 step increment 輸入設定為 1.2。呼叫該方法時會發生什麼？
嘗試將值設定為 4，這是無效的。呼叫該方法時會發生什麼？
規範
| 規範 |
|---|
| HTML # dom-input-stepup-dev |
瀏覽器相容性
載入中…