搜索

首页  >  问答  >  正文

如何增加输入的数字?

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

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

// populate field
document.querySelector("input").value = "123";
<input type="number" step="100" value="0"/>

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

P粉605233764P粉605233764231 天前340

全部回复(2)我来回复

  • P粉459440991

    P粉4594409912024-04-02 17:25:23

    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。这些方法可确保正确修改输入值,无论步骤属性如何。

    回复
    0
  • P粉138871485

    P粉1388714852024-04-02 09:04:37

    step 推离属性:

    const input = document.querySelector('input');
    input.value = 123;
    input.setAttribute('value', 123);
    <input type="number" step="100">

    回复
    0
  • 取消回复