Comment augmenter le nombre saisi ?

Question

Lors de l'utilisation des attributs HTML input 元素时，我尝试实现 step. De cette façon, je peux ajouter 100 à la valeur actuelle en cliquant sur les flèches haut/bas dans le champ de saisie.

Cependant, step détermine les valeurs légales, cela ne fonctionne donc pas avec de simples incréments. Par exemple, si je saisis 123, cela passera à 200 et non à 223.

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

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

Existe-t-il une solution simple pour les input fonctions d'incrémentation/décrémentation élément par élément ?

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>

Dans la fonction de rappel, nous utilisons les méthodes intégrées stepUp() et stepDown() pour incrémenter et décrémenter la valeur d'entrée de 100 respectivement. Ces méthodes garantissent que les valeurs d'entrée sont modifiées correctement quelles que soient les propriétés de l'étape.

Answer 2

step Attribut repousser :

const input = document.querySelector('input');
input.value = 123;
input.setAttribute('value', 123);

<input type="number" step="100">