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 1 ist, falls nicht angegeben, und step auf den Standardwert für step zurückgreift, falls nicht angegeben.

Eingabetyp	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)	Zweiwöchige 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	Schritte von 0,1 <input type="number" min="0" step="0.1" max="10">
range	1	Schritte von 2: <input type="range" min="0" step="2" max="10">

Wenn die Methode aufgerufen wird, wird der Wert des Formularelements um den im step Attribut angegebenen Wert, multipliziert mit dem Parameter, innerhalb der im Formularelement festgelegten Einschränkungen geändert. Der Standardwert für den Parameter, wenn kein Wert übergeben wird, ist 1. Die Methode wird den Wert nicht über den festgelegten max Wert hinaus erhöhen oder die durch das step Attribut festgelegten Einschränkungen verletzen.

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

Wenn das Formularelement nicht zeit-, datums- oder zahlenspezifisch ist und daher das step Attribut nicht unterstützt (siehe die Liste der unterstützten Eingabetypen in der obigen Tabelle) oder 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;
}