HTMLInputElement : méthode stepUp() - Les API Web | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

HTMLInputElement : méthode stepUp()

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La méthode stepUp() de l'interface HTMLInputElement incrémente la valeur d'un élément HTML <input> de type numérique selon la valeur de l'attribut HTML step ou selon la valeur par défaut de step si l'attribut n'est pas défini.

Lorsqu'elle est invoquée, la méthode augmente la value de (step * n), où n vaut 1 par défaut si aucun paramètre n'est fourni.

Type d'entrée Valeur d'étape par défaut Exemple de déclaration d'étape

date	1 (jour)	Incréments de 7 jours (une semaine) : <input type="date" min="2019-12-25" step="7">
month	1 (mois)	Incréments de 12 mois (un an) : <input type="month" min="2019-12" step="12">
week	1 (semaine)	Incréments de deux semaines : <input type="week" min="2019-W23" step="2">
time	60 (secondes)	Incréments de 900 secondes (15 minutes) : <input type="time" min="09:00" step="900">
datetime-local	1 (jour)	Incréments pour le même jour de la semaine : <input type="datetime-local" min="2019-12-25T19:30" step="7">
number	1	Incréments de 0.1 : <input type="number" min="0" step="0.1" max="10">
range	1	Incréments de 2 : <input type="range" min="0" step="2" max="10">

Lorsqu'elle est invoquée, la méthode modifie la valeur du contrôle de formulaire en fonction de la valeur fournie par l'attribut step, multipliée par le paramètre, dans les contraintes définies sur le contrôle. La valeur par défaut du paramètre, si aucun n'est fourni, est 1. La méthode n'autorise pas la valeur à dépasser la valeur définie par max et respecte les contraintes imposées par l'attribut step.

Si la valeur avant l'appel à stepUp() est invalide — par exemple si elle ne respecte pas les contraintes imposées par l'attribut step — l'appel à stepUp() produira une valeur conforme aux contraintes du contrôle.

Si le contrôle de formulaire n'est ni temporel, ni de date, ni numérique (et ne prend donc pas en charge l'attribut step), ou si la valeur de l'étape vaut any, une exception InvalidStateError est levée.

Dans cet article

Syntaxe

js
stepUp()
stepUp(stepIncrement)

Paramètres

stepIncrement Facultatif

Une valeur numérique. Si aucun paramètre n'est passé, stepIncrement vaut 1 par défaut.

Valeur de retour

Aucune (undefined).

Exemples

Cliquez sur le bouton de cet exemple pour incrémenter un contrôle de type number :

HTML

html
<p>
  <label for="theNumber">
    Indiquez un nombre entre 0 et 400 divisible par 5&nbsp;:
  </label>
  <input type="number" step="5" id="theNumber" min="0" max="400" />
</p>
<p>
  <label> Indiquez de combien de pas incrémenter ou laissez vide&nbsp;: </label>
  <input type="number" step="1" id="incrementInput" min="0" max="25" />
</p>
<input type="button" value="Incrémenter" id="theButton" />

JavaScript

js
/* fait appeler la fonction par le bouton */
const button = document.getElementById("theButton");
button.addEventListener("click", () => {
  stepOnUp();
});

function stepOnUp() {
  let input = document.getElementById("theNumber");
  let val = document.getElementById("incrementInput").value;

  if (val) {
    /* incrémente avec un paramètre */
    input.stepUp(val);
  } else {
    /* ou sans paramètre. Essayez avec 0 */
    input.stepUp();
  }
}

CSS

css
input:invalid {
  border: red solid 3px;
}

Résultat

Notez que si vous ne passez pas de paramètre à la méthode stepUp, la valeur par défaut est 1. Toute autre valeur est un multiplicateur de la valeur de l'attribut step, qui dans ce cas est 5. Si vous passez 4 comme stepIncrement, l'entrée sera stepUp de 4 * 5, ou 20. Si le paramètre est 0, le nombre ne sera pas incrémenté. Le stepUp ne permettra pas à l'entrée de sortir de la plage, dans ce cas il s'arrêtera quand il atteindra 400, et arrondira à la baisse tous les nombres flottants qui sont passés en tant que paramètre.

Essayez de régler l'incrément d'entrée sur 1.2. Que se passe-t-il lorsque vous invoquez la méthode ?

Essayez de fixer la valeur à 4, qui n'est pas valide. Que se passe-t-il lorsque vous invoquez la méthode ?

L'élément HTML <input>
L'interface HTMLInputElement
La méthode HTMLInputElement.stepDown()
Les attributs HTML step, min et max

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 9 déc. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLInputElement
Propriétés d'instance
Méthodes d'instance
Évènements
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript