如何增加輸入的數字?
P粉605233764
P粉605233764 2024-04-01 19:13:50
0
2
356

當使用 HTML input 元素時,我嘗試實作 step 屬性。這樣我就可以透過點擊輸入欄位中的向上/向下箭頭將當前值加 100。

但是,step 決定合法值,因此它不適用於簡單的增量。例如,如果我輸入 123,它將增加到 200,而不是 223。

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

對於 input 元素的遞增/遞減函數是否有簡單的解決方法?

P粉605233764
P粉605233764

全部回覆(2)
P粉459440991

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粉138871485

step 推離屬性:

const input = document.querySelector('input');
input.value = 123;
input.setAttribute('value', 123);
<input type="number" step="100">
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板