HTMLInputElement.stepUp() メソッドは、数値型の<input> 要素の値をstep 属性の値、または step 属性が明示的に設定されていない場合は既定のstep の値だけ増加させるものです。このメソッドを呼び出すと、value は (step * n) だけ減少します。ここで、n は指定されなかった場合、既定で1 となり、step が指定されなかった場合、step の既定値となります。

このメソッドを呼び出すと、フォームコントロール内で設定された制約の範囲内で、step 属性で指定された値に引数を掛けた値だけ、フォームコントロールの値を変更します。引数が渡されなかった場合の既定値は1 です。このメソッドは、値がmax を上回ったり、step 属性が設定する制約に違反させるようなことはしません。

stepUp() メソッドを呼び出す前の値が無効であった場合、例えばstep 属性で設定した制約に適合しない場合、stepUp() メソッドを呼び出すと、フォームコントロールの制約に適合する値が返されます。

フォームコントロールが時刻、日付、数値以外のもので、step 属性に対応していない場合（前述の表に対応する入力型のリストを参照）、またはstep 値がany に設定されている場合、InvalidStateError 例外が発生します。

構文

stepUp()stepUp(stepIncrement)

引数

stepIncrement省略可

数値です。引数が渡されなかった場合、stepIncrement は既定で1 になります。

返値

なし (undefined)。

例

この例のボタンをクリックすると、number 入力型の値が増加します。

HTML

<p>  <label for="theNumber">    0 から 400 までの 5 で割り切れる数を入力してください。  </label>  <input type="number" step="5" min="0" max="400" /></p><p>  <label>増加させたい段階の数を入力するか、空欄のままにしてください。</label>  <input type="number" step="1" min="0" max="25" /></p><input type="button" value="Increment" />

Java10Script

/* 関数を呼び出すボタンを生成 */const button = document.getElementById("theButton");button.addEventListener("click", () => {  stepOnUp();});function stepOnUp() {  let input = document.getElementById("theNumber");  let val = document.getElementById("incrementInput").value;  if (val) {    /* 引数付きで加算 */    input.stepUp(val);  } else {    /* 引数なしで加算。 0 を試してください。 */    input.stepUp();  }}

CSS

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

結果

stepUp メソッドに引数を渡さなかった場合、既定値は1 になります。他の値はstep 属性の値に乗算されるので、この場合は5 となります。stepIncrement に 4 を渡した場合、stepUp は4 * 5 すなわち20 だけ行われます。この引数が0 であった場合、数値は加算されません。stepUp メソッドは入力が範囲外にならないように、この場合は400 になった時点で停止し、引数として渡された値の小数点以下を切り捨てます。

段階の加算係数を1.2 に設定してみてください。メソッドを呼び出すとどうなるでしょうか？

値を不正な数値である4 に設定してみてください。メソッドを呼び出すとどうなるでしょうか？

仕様書

ブラウザーの互換性

関連情報

• <input>
• HTMLInputElement
• HTMLInputElement.stepDown
• step,min,max 属性