1. Web
  2. Les API Web
  3. HTMLInputElement
  4. stepUp()

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTMLInputElement : méthode stepUp()

Limited availability

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.

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 ?

Spécifications

Specification
HTML
# dom-input-stepup-dev

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content