Comment augmenter le nombre saisi ?
P粉605233764
P粉605233764 2024-04-01 19:13:50
0
2
386

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 ?

P粉605233764
P粉605233764

répondre à tous(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>

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.

P粉138871485

step Attribut repousser :

const input = document.querySelector('input');
input.value = 123;
input.setAttribute('value', 123);
<input type="number" step="100">
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal