HTMLInputElement: stepDown() 方法
HTMLInputElement.stepDown() 方法會根據 step<input>
當呼叫該方法時，它會將 valuestepstepstep 的預設值。
該方法適用於所有支援 step 屬性的數字、日期和時間輸入型別，包括 date、month、week、time、datetime-local、number 和 range。
給定 <input id="myTime" type="time" max="17:00" step="900" value="17:00">，呼叫 myTime.stepDown(3) 會將值更改為 16:15，即減去 3 * 900（45 分鐘）。而呼叫 myTime.stepDown()（不帶引數）則會得到 16:45，因為 n 預設為 1。
<!-- decrements by intervals of 900 seconds (15 minute) -->
<input type="time" max="17:00" step="900" />
<!-- decrements by intervals of 7 days (one week) -->
<input type="date" max="2019-12-25" step="7" />
<!-- decrements by intervals of 12 months (one year) -->
<input type="month" max="2019-12" step="12" />
然而，在 <input type="time" max="17:00" step="900"> 上呼叫 stepDown 不會將值設定為 17:00，正如人們所期望的那樣——對於 stepUp 在輸入為 <input type="time" min="17:00" step="900"> 時是這樣的。相反，第一次呼叫 stepDown 會將初始值設定為 23:45，即使設定了 max 屬性。第二次呼叫會將值設定為 17:00。第三次呼叫會將值設定為 16:45。
let input1 = document.createElement("input");
input1.setAttribute("type", "time");
input1.setAttribute("min", "17:00");
input1.setAttribute("step", 900);
console.log(input1.value); // ""
input1.stepUp();
console.log(input1.value); // "17:00"
// However
let input2 = document.createElement("input");
input2.setAttribute("type", "time");
input2.setAttribute("max", "17:00");
input2.setAttribute("step", 900);
console.log(input2.value); // ""
input2.stepDown();
console.log(input2.value); // "23:45"
input2.stepDown();
console.log(input2.value); // "17:00"
input2.stepDown();
console.log(input2.value); // "16:45"
當呼叫該方法時，它會根據 step 屬性的值乘以引數的值來更改表單控制元件的值，並在表單控制元件設定的約束範圍內。如果未傳遞引數，則引數的預設值為 1。該方法不會導致值低於設定的 minstepn 的負值將遞增值，但不會超過 max
如果呼叫 stepDown() 方法之前的值無效，例如，如果不符合 step 屬性設定的約束，呼叫 stepDown() 方法將返回一個符合表單控制元件約束的值。
如果表單控制元件不是時間、日期或數字型別的，因此不支援 step 屬性（請參閱上面支援的輸入型別列表），或者 step 的值設定為 any，則會丟擲 InvalidStateError 異常。
語法
stepDown()
stepDown(stepDecrement)
引數
stepDecrement可選-
一個數字值。如果未傳遞引數，stepDecrement 預設為 1。
如果值為浮點數，則該值將像傳遞了
Math.floor(stepDecrement)一樣遞減。如果值為負數，則該值將遞增而不是遞減。
返回值
無（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 for="decrementButton">
Enter how many values of step you would like to decrement by or leave it
blank:
</label>
<input type="number" step="1" id="decrementInput" min="-2" max="15" />
</p>
<input type="button" value="Decrement" id="theButton" />
JavaScript
/* make the button call the function */
let button = document.getElementById("theButton");
button.addEventListener("click", () => {
stepOnDown();
});
function stepOnDown() {
let input = document.getElementById("theNumber");
let val = document.getElementById("decrementInput").value;
if (val) {
// decrement with a parameter
input.stepDown(val);
} else {
// or without a parameter. Try it with 0, 5, -2, etc.
input.stepDown();
}
}
CSS
input:invalid {
border: red solid 3px;
}
結果
注意，如果您不向 stepDown() 方法傳遞引數，它預設為 1。任何其他值都是 step 屬性值（在本例中為 5）的乘數。如果我們傳遞 4 作為 stepDecrement，則輸入將按 4 * 5，即 20 進行 stepDown。如果引數為 0，則數字不會遞減。stepDown() 方法不會讓輸入超出範圍，在這種情況下，它會在達到 0 時停止，並將傳遞為引數的浮點數向下取整。
嘗試將步長遞減輸入設定為 1.2。呼叫該方法會發生什麼？
嘗試將值設定為 44，這是無效的。呼叫該方法會發生什麼？
規範
| 規範 |
|---|
| HTML # dom-input-stepdown-dev |
瀏覽器相容性
載入中…