HTMLInputElement: stepDown() Methode

Die Methode HTMLInputElement.stepDown() verringert den Wert eines <input> Elements mit einem numerischen Typ um den Wert des step Attributs oder um bis zu n Vielfache des step-Attributs, wenn eine Zahl als Parameter übergeben wird.

Die Methode, wenn aufgerufen, verringert den value um (step * n), wobei n standardmäßig 1 ist, wenn nicht spezifiziert, und step der Standardwert für step ist, wenn nicht angegeben.

Gültig für alle numerischen, Datums- und Zeiteingabetypen, die das step-Attribut unterstützen, einschließlich date, month, week, time, datetime-local, number, und range.

Angenommen, <input id="myTime" type="time" max="17:00" step="900" value="17:00">, verändert der Aufruf von myTime.stepDown(3) den Wert auf 16:15, indem die Zeit um 3 * 900, oder 45 Minuten, verringert wird. myTime.stepDown(), ohne Parameter, würde zu 16:45 führen, da n standardmäßig auf 1 gesetzt ist.

html
<!-- decrements by intervals of 900 seconds (15 minute) -->
<input type="time" max="17:00" step="900" />

<!-- decrements by intervals of 7 days (one week) -->
<input type="date" max="2019-12-25" step="7" />

<!-- decrements by intervals of 12 months (one year) -->
<input type="month" max="2019-12" step="12" />

Jedoch würde der Aufruf von stepDown auf <input type="time" max="17:00" step="900"> den Wert nicht auf 17:00 setzen, wie man erwarten könnte — und wie es bei stepUp der Fall ist, wenn die Eingabe <input type="time" min="17:00" step="900"> ist. Stattdessen setzt der erste Aufruf von stepDown den Anfangswert auf 23:45, obwohl das max-Attribut gesetzt ist. Der zweite Aufruf setzt den Wert auf 17:00. Und der dritte Aufruf setzt den Wert auf 16:45.

js
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"
// However
let 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"

Die Methode, wenn aufgerufen, verändert den Wert des Formularelements um den im step-Attribut angegebenen Wert, multipliziert mit dem Parameter, innerhalb der im Formularelement festgelegten Beschränkungen. Der Standardwert für den Parameter ist 1, wenn keiner übergeben wird. Die Methode wird den Wert nicht unter den im min festgelegten Wert fallen lassen oder die durch das step Attribut festgelegten Beschränkungen überschreiten. Ein negativer Wert für n wird den Wert erhöhen, aber nicht über den max Wert hinaus erhöhen.

Wenn der Wert vor dem Aufruf der stepDown() Methode ungültig ist, zum Beispiel wenn er nicht den durch das step-Attribut festgelegten Einschränkungen entspricht, wird der Aufruf der stepDown() Methode einen Wert zurückgeben, der den Formularelement-Beschränkungen entspricht.

Wenn das Formularelement weder zeitlich, datums- noch numerisch ist und daher das step-Attribut nicht unterstützt (siehe die Liste der unterstützten Eingabetypen oben), oder wenn der step-Wert auf any gesetzt ist, wird eine InvalidStateError Ausnahme ausgelöst.

Syntax

js
stepDown()
stepDown(stepDecrement)

Parameter

stepDecrement Optional

Ein numerischer Wert. Wenn kein Parameter übergeben wird, ist stepDecrement standardmäßig 1.

Wenn der Wert eine Fließkommazahl ist, wird der Wert verringert, als ob Math.floor(stepDecrement) übergeben wurde. Wenn der Wert negativ ist, wird der Wert anstelle des Verminderungsprozesses erhöht.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

Wird in einem der folgenden Fälle ausgelöst:

  • wenn die Methode nicht für den aktuellen type Wert anwendbar ist,
  • wenn dem Element kein step Wert zugeordnet ist,
  • wenn der value nicht in eine Zahl umgewandelt werden kann,
  • wenn der resultierende Wert über dem max oder unter dem min liegt.

Beispiele

Klicken Sie auf die Schaltfläche in diesem Beispiel, um den number Eingabetyp zu verringern:

HTML

html
<p>
  <label for="theNumber">
    Enter a number between 0 and 400 that is divisible by 5:
  </label>
  <input type="number" step="5" id="theNumber" min="0" max="400" />
</p>
<p>
  <label for="decrementButton">
    Enter how many values of step you would like to decrement by or leave it
    blank:
  </label>
  <input type="number" step="1" id="decrementInput" min="-2" max="15" />
</p>
<input type="button" value="Decrement" id="theButton" />

JavaScript

js
/* make the button call the function */
let button = document.getElementById("theButton");
button.addEventListener("click", () => {
  stepOnDown();
});

function stepOnDown() {
  let input = document.getElementById("theNumber");
  let val = document.getElementById("decrementInput").value;

  if (val) {
    // decrement with a parameter
    input.stepDown(val);
  } else {
    // or without a parameter. Try it with 0, 5, -2, etc.
    input.stepDown();
  }
}

CSS

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

Ergebnis

Beachten Sie, dass, wenn Sie keinen Parameter an die stepDown() Methode übergeben, sie standardmäßig auf 1 gesetzt ist. Jeder andere Wert ist ein Multiplikator des step Attributwerts, der in diesem Fall 5 ist. Wenn wir 4 als stepDecrement übergeben, wird die Eingabe stepDown um 4 * 5, oder 20. Wenn der Parameter 0 ist, wird die Zahl nicht verringert. Die stepDown() Methode erlaubt nicht, dass die Eingabe den Bereich verlässt, in diesem Fall stoppt sie, wenn sie 0 erreicht, und rundet jede übergebene Fließkommazahl ab.

Versuchen Sie, die Step-Verkleinerung auf 1.2 zu setzen. Was passiert, wenn Sie die Methode aufrufen?

Versuchen Sie, den Wert auf 44 zu setzen, was nicht gültig ist. Was passiert, wenn Sie die Methode aufrufen?

Spezifikationen

Specification
HTML
# dom-input-stepdown-dev

Browser-Kompatibilität

Siehe auch