如何增加输入的数字？

Question

当使用 HTML input 元素时，我尝试实现 step 属性。这样我就可以通过单击输入字段中的向上/向下箭头将当前值加 100。

但是，step 确定合法值，因此它不适用于简单的增量。例如，如果我输入 123，它将增加到 200，而不是 223。

// populate field
document.querySelector("input").value = "123";

<input type="number" step="100" value="0"/>

对于 input 元素的递增/递减函数是否有简单的解决方法？

Answer 1

const input = document.getElementById("myInput");
const incrementBtn = document.getElementById("incrementBtn");
const decrementBtn = document.getElementById("decrementBtn");

incrementBtn.addEventListener("click", () => {
  input.stepUp(100); // Increment the input value by 1
});

decrementBtn.addEventListener("click", () => {
  input.stepDown(100); // Decrement the input value by 1
});

<input id="myInput" type="number" value="123" min="0" step="1" />
<button id="incrementBtn">Increment</button>
<button id="decrementBtn">Decrement</button>

在回调函数中，我们使用内置方法stepUp()和stepDown()分别将输入值递增和递减100。这些方法可确保正确修改输入值，无论步骤属性如何。

Answer 2

step 推离属性：

const input = document.querySelector('input');
input.value = 123;
input.setAttribute('value', 123);

<input type="number" step="100">