HTMLInputElement: stepDown() 方法

HTMLInputElement.stepDown() 方法会将一个 <input> 元素的数值类型的 step 属性的值减去 value 属性的值，或者如果传递数字作为参数，则减去 step 属性的 n 倍。

当调用该方法时，会将 value 减去 (step * n)，其中 n 默认值为 1（如果未指定），而 step 默认值为 step 的默认值（如果未指定）。

对所有支持 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。

html
<!-- 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，正如人们预期的那样——以及当输入为 <input type="time" min="17:00" step="900"> 时 stepUp 所做的那样。相反，第一次调用 stepDown 将会将初始值设置为 23:45，即使设置了 max 属性。第二次调用会将值设置为 17:00。第三次调用会将值设置为 16:45。

js
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 值。

如果在调用 stepDown() 方法之前的值无效，例如，如果它与 step 属性设置的约束不匹配，则调用 stepDown() 方法将返回一个与表单控件约束匹配的值。

如果表单控件本质上不是时间、日期或数字，因此不支持 step 属性（请参阅上面列出的受支持的输入类型），或者如果 step 值设置为 any，则会抛出 InvalidStateError 异常。

语法

js
stepDown()
stepDown(stepDecrement)

参数

stepDecrement 可选

数值。如果未传递参数，则 stepDecrement 默认值为 1。

如果值是浮点数，则值将减小，就像传递了 Math.floor(stepDecrement) 一样。如果值是负数，则值将增加而不是减小。

返回值

无 (undefined).

异常

InvalidStateError DOMException

在以下情况之一中抛出

  • 如果该方法不适用于当前 type 值，
  • 如果元素没有 step 值，
  • 如果 value 无法转换为数字，
  • 如果结果值超过 max 或低于 min。

示例

单击此示例中的按钮以减少 number 输入类型

HTML

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

js
/* 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

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

结果

请注意，如果您没有将参数传递给 stepDown() 方法，则它默认为 1。任何其他值都是 step 属性值的倍数，在本例中为 5。如果我们将 4 作为 stepDecrement 传递，则输入将减少 4 * 5，即 20。如果参数为 0，则数字不会减少。stepDown() 方法不允许输入超出范围，在本例中，它在达到 0 时停止，并将传递的参数中的浮点数四舍五入。

尝试将步长减量输入设置为 1.2。调用该方法时会发生什么？

尝试将值设置为 44，这是无效的。调用该方法时会发生什么？

规范

规范
HTML 标准
# dom-input-stepdown-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅