HTMLInputElement: stepUp() Methode

Die HTMLInputElement.stepUp() Methode erhöht den Wert eines numerischen Typs eines <input> Elements um den Wert des step Attributs oder den Standardwert von step, falls das step Attribut nicht explizit gesetzt ist. Wenn die Methode aufgerufen wird, erhöht sie den value um (step * n), wobei n standardmäßig auf 1 gesetzt ist, wenn nicht angegeben, und step standardmäßig den Standardwert für step hat, wenn nicht angegeben.

Input-Typ	Standardwert für Step	Beispiel für Step-Deklaration
date	1 (Tag)	7 Tage (eine Woche) Schritte: <input type="date" min="2019-12-25" step="7">
month	1 (Monat)	12 Monate (ein Jahr) Schritte: <input type="month" min="2019-12" step="12">
week	1 (Woche)	Zwei Wochen Schritte: <input type="week" min="2019-W23" step="2">
time	60 (Sekunden)	900 Sekunden (15 Minuten) Schritte: <input type="time" min="09:00" step="900">
datetime-local	1 (Tag)	Gleicher Wochentag: <input type="datetime-local" min="019-12-25T19:30" step="7">
number	1	0.1 Schritte <input type="number" min="0" step="0.1" max="10">
range	1	Erhöhungen um 2: <input type="range" min="0" step="2" max="10">

Die Methode ändert, wenn sie aufgerufen wird, den Wert des Formkontrolls um den im step Attribut angegebenen Wert, multipliziert mit dem Parameter, innerhalb der auf das Formkontroll angewendeten Einschränkungen. Der Standardwert für den Parameter ist 1, wenn kein Wert übergeben wird. Die Methode wird den Wert nicht über den gesetzten max Wert hinaus erhöhen oder die durch das step Attribut festgelegten Einschränkungen missachten.

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

Wenn das Formkontroll nicht zeit-, daten- oder zahlenbasiert ist und daher das step Attribut nicht unterstützt (siehe die Liste der unterstützten Eingabetypen in der obigen Tabelle), oder wenn der step-Wert auf any gesetzt ist, wird eine InvalidStateError Ausnahme ausgelöst.

stepUp()
stepUp(stepIncrement)

<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>
    Enter how many values of step you would like to increment by or leave it
    blank:
  </label>
  <input type="number" step="1" id="incrementInput" min="0" max="25" />
</p>
<input type="button" value="Increment" id="theButton" />

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

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

  if (val) {
    /* increment with a parameter */
    input.stepUp(val);
  } else {
    /* or without a parameter. Try it with 0 */
    input.stepUp();
  }
}

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