HTMLInputElement：stepUp() 方法

HTMLInputElement.stepUp() 方法会根据 <input> 元素的 step 属性值（如果未显式设置，则使用默认 step 值）递增数值类型的 <input> 元素的值。调用该方法时，会将 value 递增 (step * n)，其中 n 的默认值为 1（如果未指定），step 的默认值为 step 的默认值（如果未指定）。

输入类型 默认 step 值 示例 step 声明
date 1（天） 7 天（一周）增量
<input type="date" min="2019-12-25" step="7">
month 1（月） 12 个月（一年）增量
<input type="month" min="2019-12" step="12">
week 1（周） 两周增量
<input type="week" min="2019-W23" step="2">
time 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">
number 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 异常。

语法

js
stepUp()
stepUp(stepIncrement)

参数

stepIncrement 可选

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

返回值

无 (undefined)。

示例

在此示例中，单击按钮可递增 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>
    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

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

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

结果

请注意，如果未向 stepUp 方法传递参数，则默认为 1。任何其他值都是 step 属性值的倍数，在本例中为 5。如果将 4 作为 stepIncrement 传递，则输入将以 4 * 5 或 20 为增量递增。如果参数为 0，则数字将不会递增。stepUp 不会允许输入超出范围，在本例中，当它达到 400 时停止，并向下舍入作为参数传递的任何浮点数。

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

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

规范

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

浏览器兼容性

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

另请参阅