La méthodestepDown() de l'interfaceHTMLInputElement décrémente la valeur d'un élément HTML<input> de type numérique selon la valeur de l'attribut HTMLstep ou jusqu'àn multiples de cet attribut lorsque l'on fournit un nombre en paramètre.

Lorsqu'elle est appelée, la méthode décrémente lavalue de (step * n), où n vaut 1 par défaut si aucun paramètre n'est fourni, etstep prend la valeur par défaut pourstep s'il n'est pas défini.

Cette méthode est applicable à tous les types d'entrée numériques, temporels et de date qui prennent en charge l'attribut d'étape, notammentdate,month,week,time,datetime-local,number etrange.

Étant donné<input type="time" max="17:00" step="900" value="17:00">, l'appelmyTime.stepDown(3) fixera la valeur à 16:15, c'est‑à‑dire en décrémentant de3 * 900 secondes (45 minutes). Un appelmyTime.stepDown() sans paramètre aurait donné16:45, carn vaut1 par défaut.

<!-- décrémente par intervalles de 900 secondes (15 minutes) --><input type="time" max="17:00" step="900" /><!-- décrémente par intervalles de 7 jours (une semaine) --><input type="date" max="2019-12-25" step="7" /><!-- décrémente par intervalles de 12 mois (un an) --><input type="month" max="2019-12" step="12" />

Cependant, appelerstepDown sur<input type="time" max="17:00" step="900"> ne placera pas immédiatement la valeur à17:00, contrairement à l'appel destepUp sur<input type="time" min="17:00" step="900">. Lors du premier appel, la valeur initiale sera réglée à23:45 même si l'attributmax est défini. Le deuxième appel fixera la valeur à17:00. Le troisième appel la fixera à16:45.

let input1 = document.createElement("input");input1.setAttribute("type", "time");input1.setAttribute("min", "17:00");input1.setAttribute("step", 900);console.log(input1.value); // ""input1.stepUp();console.log(input1.value); // "17:00"// Cependantlet input2 = document.createElement("input");input2.setAttribute("type", "time");input2.setAttribute("max", "17:00");input2.setAttribute("step", 900);console.log(input2.value); // ""input2.stepDown();console.log(input2.value); // "23:45"input2.stepDown();console.log(input2.value); // "17:00"input2.stepDown();console.log(input2.value); // "16:45"

Lorsqu'elle est invoquée, la méthode modifie la valeur du contrôle de formulaire en fonction de la valeur fournie par l'attributstep, multipliée par le paramètre, en respectant les contraintes définies sur le contrôle. La valeur par défaut du paramètre, si elle n'est pas fournie, est de 1. La méthode n'autorise pas la valeur à descendre en dessous de la valeur définie parmin et respecte les contraintes de l'attributstep. Une valeur négative pourn incrémentera la valeur, mais ne la fera pas dépasser la valeurmax.

If the value before invoking thestepDown() method is invalid, for example, if it doesn't match the constraints set by thestep attribute, invoking thestepDown() method will return a value that does match the form controls constraints.

Si le contrôle de formulaire n'est ni temporel, ni de date, ni numérique (et ne prend donc pas en charge l'attributstep), ou si la valeur destep estany, une exceptionInvalidStateError est levée.

Syntaxe

stepDown()stepDown(stepDecrement)

Paramètres

• stepDecrementFacultatif

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

  Si la valeur est un nombre à virgule, elle sera traitée comme siMath.floor(stepDecrement) avait été passée. Si la valeur est négative, la valeur sera incrémentée au lieu d'être décrémentée.

Valeur de retour

Aucune (undefined).

Exceptions

InvalidStateErrorDOMException

Levée dans l'un des cas suivants :

• si la méthode n'est pas applicable pour la valeur courante de l'attributtype,
• si l'élément n'a pas d'attributstep,
• si lavalue ne peut pas être convertie en nombre,
• si la valeur résultante est supérieure àmax ou inférieure àmin.

Exemples

Cliquez sur le bouton de cet exemple pour décrémenter un contrôle de typenumber :

HTML

<p>  <label for="theNumber">    Indiquez un nombre entre 0 et 400, divisible par 5&nbsp;:  </label>  <input type="number" step="5" min="0" max="400" /></p><p>  <label for="decrementButton">    Indiquez de combien de pas décrémenter ou laissez vide&nbsp;:  </label>  <input type="number" step="1" min="-2" max="15" /></p><input type="button" value="Décrémenter" />

JavaScript

/* fait appeler la fonction par le bouton */let button = document.getElementById("theButton");button.addEventListener("click", () => {  stepOnDown();});function stepOnDown() {  let input = document.getElementById("theNumber");  let val = document.getElementById("decrementInput").value;  if (val) {    // décrémente avec un paramètre    input.stepDown(val);  } else {    // ou sans paramètre. Essayez avec 0, 5, -2, etc.    input.stepDown();  }}

CSS

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

Résultat

Notez que si vous ne passez pas de paramètre à la méthodestepDown(), elle prend1 par défaut. Toute autre valeur multiplie la valeur de l'attributstep. Par exemple, sistep vaut5 et que vous passez4, l'appelstepDown(4) décrémentera la valeur de4 * 5, soit20. Si le paramètre vaut0, la valeur ne sera pas modifiée. La méthodestepDown() n'autorise pas la sortie de plage : elle s'arrêtera, par exemple, lorsque la valeur atteindra0, et arrondira les nombres à virgule fournis en paramètre.

Essayez de mettre le champ de décrément à1.2. Que se passe‑t‑il lors de l'appel de la méthode ?

Essayez de définir la valeur sur44, qui n'est pas valide. Que se passe‑t‑il lors de l'appel de la méthode ?

Spécifications

Compatibilité des navigateurs

Voir aussi

• <input>
• HTMLInputElement
• HTMLInputElement.stepUp()
• step,min etmax attributes