1. Web
  2. Web-APIs
  3. HTMLInputElement
  4. stepUp()

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

HTMLInputElement: Methode stepUp()

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die Methode HTMLInputElement.stepUp() erhöht den Wert eines numerischen <input>-Elements um den Wert des Attributs step oder um den Standardwert für step, wenn das Attribut nicht ausdrücklich gesetzt ist. Beim Aufruf erhöht die Methode den value um (step * n). Dabei ist n standardmäßig 1, wenn kein Wert angegeben wird, und step entspricht dem Standardwert für step, wenn das Attribut nicht angegeben ist.

Input-Typ Standardwert für step Beispiel für die Angabe von step
date 1 (Tag) Schritte von 7 Tagen (einer Woche):
<input type="date" min="2019-12-25" step="7">
month 1 (Monat) Schritte von 12 Monaten (einem Jahr):
<input type="month" min="2019-12" step="12">
week 1 (Woche) Schritte von zwei Wochen:
<input type="week" min="2019-W23" step="2">
time 60 (Sekunden) Schritte von 900 Sekunden (15 Minuten):
<input type="time" min="09:00" step="900">
datetime-local 1 (Tag) Derselbe 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">

Beim Aufruf ändert die Methode den Wert des Formularelements um den Wert des Attributs step, multipliziert mit dem übergebenen Parameter. Dabei gelten die für das Formularelement festgelegten Einschränkungen. Wenn kein Parameter übergeben wird, ist sein Standardwert 1. Die Methode lässt weder zu, dass der Wert den festgelegten Wert von max überschreitet, noch, dass er gegen die durch das Attribut step festgelegten Einschränkungen verstößt.

Ist der Wert vor dem Aufruf von stepUp() ungültig – etwa weil er nicht den durch das Attribut step festgelegten Einschränkungen entspricht –, führt der Aufruf zu einem Wert, der die Einschränkungen des Formularelements erfüllt.

Wenn das Formularelement weder einen Zeit-, Datums- noch einen numerischen Wert enthält und daher das Attribut step nicht unterstützt (siehe die Liste der unterstützten Input-Typen in der Tabelle oben), oder wenn der Wert von step auf any gesetzt ist, wird eine InvalidStateError-Ausnahme ausgelöst.

Syntax

js
stepUp()
stepUp(stepIncrement)

Parameter

stepIncrement Optional

Ein numerischer Wert. Wenn kein Parameter übergeben wird, ist der Standardwert für stepIncrement 1.

Rückgabewert

Keiner (undefined).

Beispiele

Klicken Sie in diesem Beispiel auf die Schaltfläche, um den Wert des number-Eingabefelds zu erhöhen:

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>
    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" />

CSS

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

JavaScript

js
/* 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();
  }
}

Ergebnis

Wenn Sie der Methode stepUp keinen Parameter übergeben, verwendet sie standardmäßig 1. Jeder andere Wert ist ein Multiplikator für den Wert des Attributs step, der hier 5 beträgt. Wenn Sie 4 als stepIncrement übergeben, erhöht stepUp den Eingabewert um 4 * 5, also um 20. Bei einem Parameterwert von 0 wird die Zahl nicht erhöht. stepUp lässt nicht zu, dass der Eingabewert den zulässigen Bereich verlässt: In diesem Fall stoppt die Erhöhung bei 400. Als Parameter übergebene Fließkommazahlen werden abgerundet.

Versuchen Sie, den Eingabewert für die Schrittweite auf 1.2 zu setzen. Was passiert, wenn Sie die Methode aufrufen?

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

Spezifikationen

Spezifikation
HTML
# dom-input-stepup-dev

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden