DOM

：

：

HTMLInputElement.stepDown() メソッド

　編集：2022.11.08 by T.A.

[Edge]。→、、

HTMLInputElement の step 属性値の指定分だけ value 値を減少させます。

step に対応している type の date、month、week、time、datetime-local、number、range に有効です。

mdn： 数値型の <input> 要素の値を step 属性の値、または引数として数値が渡された場合は step 属性の最大 n 倍の値だけ減少させるものです。

mdn： このメソッドを呼び出すと、value は（step * n）だけ減少します。ここで、n は指定されなかった場合、既定で 1 となり、step が指定されなかった場合、step の既定値となります。

mdn： step 属性に対応しているすべての数値、日付、時刻の入力タイプ（date、month、week、time、datetime-local、number、range）で有効です。

構文
HTMLInputElement.stepDown([stepDecrement])
HTMLInputElement HTMLInputElement。
stepDecrement 省略可。ステップ ダウンするステップ数を表す数値。初期値 1。

小数数値を指定しても小数点以下は切り捨てられるようです。

負の値の場合はステップ アップ（増加）します。

mdn： この値が浮動小数点数であった場合、値は Math.floor(stepDecrement) が渡されたときと同様に減少します。この値が負の数であった場合は、値は減少するのではなく増加します。

戻り値

例外
InvalidStateError
以下の内容です：
関連

stepUp()。

例
mdnより

<input id="myTime" type="time" max="17:00" step="900" value="17:00"> と指定された場合、myTime.step(3) を呼び出すと値は 16:15 になります。これは 3 * 900 または 45 分を引くからです。myTime.step() を引数無しで呼び出すと、n が既定で 1 となるので 16:45 になります。 

<!--  900 秒 (15 分) の間隔で減算 -->
<input type="time" max="17:00" step="900">

<!-- 7 日 (1 週間) の間隔で減算 -->
<input type="date" max="2019-12-25" step="7">

<!-- 12 ヶ月 (1 年) の間隔で減算 -->
<input type="month" max="2019-12" step="12">

しかし、stepDown() を <input type="time" max="17:00" step="900"> で呼び出すと、期待するような 17:00 にはなりません。― stepUp() を <input type="time" min="17:00" step="900"> で呼び出した場合も同様です。初めて stepDown() を呼び出すと、max 属性が設定されているにもかかわらず 23:45 になります。次に呼び出すと、値は 17:00 となり、もう一度呼び出すと、値は 16:45 になります。

JavaScript： 

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 です。このメソッドは、値が min を下回ったり、step 属性が設定する制約に違反させるようなことはしません。n に負の値を指定すると、値が増加しますが、max の値を超えて増加することはありません。

¶…省く

HTML： 

<INPUT id=IdTest type=number min=0 max=100 value=50 step=10>

JavaScript： 

D=IdTest.stepDown(1.5);  //＝[undefined]：undefined

戻り値は無いようです。値は 40 になりました。

範囲を超えるか？

HTML： 

<INPUT id=IdTest type=number min=0 max=100 value=50 step=10><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

try{
  D=IdTest.stepDown(1.5);
}catch(e){
  IdLog.innerHTML=IdLog.innerHTML+"●";
}

どうやっても範囲を超えることは無かった。

テスト