Wie kann die eingegebene Zahl erhöht werden?

Question

Bei Verwendung von HTML-input 元素时，我尝试实现 step-Attributen. Auf diese Weise kann ich 100 zum aktuellen Wert addieren, indem ich auf die Auf-/Ab-Pfeile im Eingabefeld klicke.

Allerdings bestimmt step gesetzliche Werte, sodass es nicht mit einfachen Schritten funktioniert. Wenn ich beispielsweise 123 eingebe, erhöht sich der Wert auf 200 und nicht auf 223.

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

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

Gibt es eine einfache Lösung für input elementweise Inkrementierungs-/Dekrementierungsfunktionen?

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">