HTMLInputElement: stepUp() 方法
HTMLInputElement.stepUp() 方法会根据 step 属性的值，或者在未显式设置 step 属性时使用默认的 step 值，来增加数字类型 <input> 元素的 value。调用该方法时，value 会增加 (step * n)，其中 n 在未指定时默认为 1，而 step 在未指定时默认为 step 的默认值。
| 输入类型 | 默认 step 值 | 示例 step 声明 |
|---|---|---|
| 日期 | 1 (天) |
7 天（一周）增量<input type="date" min="2019-12-25" step="7">
|
| 月份 | 1 (月) |
12 个月（一年）增量<input type="month" min="2019-12" step="12">
|
| 周 | 1 (周) |
两周增量<input type="week" min="2019-W23" step="2">
|
| 时间 | 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">
|
| 数字 | 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 异常。
语法
stepUp()
stepUp(stepIncrement)
参数
stepIncrement可选-
一个数值。如果未传递参数，
stepIncrement默认为1。
返回值
无（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>
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
/* 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
input:invalid {
border: red solid 3px;
}
结果
请注意，如果您不向 stepUp 方法传递参数，它将默认为 1。任何其他值都是 step 属性值（在本例中为 5）的倍数。如果您将 4 作为 stepIncrement 传递，输入将 stepUp 4 * 5，即 20。如果参数为 0，数字将不会增加。stepUp 不允许输入超出范围，在本例中，当达到 400 时停止，并将传递的浮点数向下取整。
尝试将 step increment 输入设置为 1.2。调用该方法时会发生什么？
尝试将值设置为 4，这是无效的。调用该方法时会发生什么？
规范
| 规范 |
|---|
| HTML # dom-input-stepup-dev |
浏览器兼容性
加载中…