英文:
How can I increment a number input?
问题
当使用HTML input元素时，我尝试实现step属性。这允许我通过点击输入字段中的上/下箭头来将当前值增加100。
然而，step确定了合法值，因此它不适用于简单的增量。例如，如果我输入123，它将增加到200，而不是223。
是否有一种简单的解决方法来实现input元素的增量/减量功能？
英文:
When using HTML input elements I tried implementing the step attribute. This allowed me to add 100 to the current value by clicking the up/down arrows in the input field.
However, step determines legal values, so it won't work for simple increments. For example, if I type in 123, it will increase to 200, not 223.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// populate field
document.querySelector("input").value = "123";
<!-- language: lang-html -->
<input type="number" step="100" value="0"/>
<!-- end snippet -->
Is there an easy workaround for an increment/decrement function for the input element?
答案1
得分: 4
step pushes away from the attribute:
<input type="number" step="100">
UPDATE:
Also, as @Barmar and @SebastianSimon pointed out, you can use defaultValue:
input.defaultValue = 123;
英文:
step pushes away from the attribute:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const input = document.querySelector('input');
input.value = 123;
input.setAttribute('value', 123);
<!-- language: lang-html -->
<input type="number" step="100">
<!-- end snippet -->
UPDATE:
Also, as @Barmar and @SebastianSimon pointed out, you can use defaultValue:
input.defaultValue = 123;
答案2
得分: 1
const input = document.getElementById("myInput");
const incrementBtn = document.getElementById("incrementBtn");
const decrementBtn = document.getElementById("decrementBtn");
incrementBtn.addEventListener("click", () => {
input.stepUp(100); // 增加输入值100
});
decrementBtn.addEventListener("click", () => {
input.stepDown(100); // 减少输入值100
});
<input id="myInput" type="number" value="123" min="0" step="1" />
<button id="incrementBtn">增加</button>
<button id="decrementBtn">减少</button>
在回调函数中，我们使用内置方法 stepUp() 和 stepDown() 来分别增加和减少输入值100。这些方法确保正确修改输入值，无论step属性如何设置。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
});
<!-- language: lang-html -->
<input id="myInput" type="number" value="123" min="0" step="1" />
<button id="incrementBtn">Increment</button>
<button id="decrementBtn">Decrement</button>
<!-- end snippet -->
Inside the callback functions, we use the built-in methods stepUp() and stepDown() to increment and decrement the input value by 100, respectively. These methods ensure the input value is modified correctly, regardless of the step attribute.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论