当使用 HTML input
元素时,我尝试实现 step
属性。这样我就可以通过单击输入字段中的向上/向下箭头将当前值加 100。
但是,step
确定合法值,因此它不适用于简单的增量。例如,如果我输入 123,它将增加到 200,而不是 223。
// populate field document.querySelector("input").value = "123";
<input type="number" step="100" value="0"/>
对于 input
元素的递增/递减函数是否有简单的解决方法?
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。这些方法可确保正确修改输入值,无论步骤属性如何。
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">