Signatur
Beschreibung
Die Eigenschaft step spiegelt das HTML-Attribut step eines <input>-Elements wider. Sie ist ein String und gibt an, in welchen Abständen sich der Wert bei den Typen number, range, date, time, datetime-local, month und week ändern darf. Neben einer positiven Zahl ist auch der Sonderwert "any" erlaubt, der jede Schrittweite zulässt.
Die Schrittweite wirkt sich an drei Stellen aus: auf die Pfeil-/Spinner-Bedienelemente und Tastatureingaben, auf die Methoden stepUp() und stepDown() sowie auf die Formularvalidierung. Werte, die nicht auf einem gültigen Schritt liegen, führen zu validity.stepMismatch === true. Die Schrittbasis ist min (falls gesetzt), sonst der ursprüngliche value-Attributwert, sonst 0.
Die Einheit hängt vom Typ ab: bei number/range sind es Zahleneinheiten (Standard 1), bei date Tage (Standard 1), bei month Monate, bei week Wochen, bei time und datetime-local Sekunden (Standard 60). Typisch nutzt man step für Preisfelder (0.01), Schieberegler mit groben Stufen oder Zeitfelder mit 15-Minuten-Raster.
Rückgabewert
step-Attributs als String, z. B. "0.01" oder "any". Ist kein Attribut gesetzt, wird ein leerer String "" zurückgegeben (es gilt dann der typabhängige Standardschritt). Beim Setzen wird das Attribut entsprechend aktualisiert.Beispiele
Schrittweite lesen und für Preise setzen
const preis = document.createElement('input');
preis.type = 'number';
console.log(JSON.stringify(preis.step)); // kein Attribut gesetzt
preis.step = '0.01';
preis.min = '0';
console.log(preis.step);
console.log(preis.getAttribute('step'));Validierung mit stepMismatch
const menge = document.createElement('input');
menge.type = 'number';
menge.min = '0';
menge.step = '5';
menge.value = '12';
console.log(menge.validity.stepMismatch); // 12 liegt nicht im 5er-Raster
menge.value = '15';
console.log(menge.validity.stepMismatch);
// Beliebige Werte zulassen
menge.step = 'any';
menge.value = '12.37';
console.log(menge.validity.stepMismatch);Zeitfeld im 15-Minuten-Raster mit stepUp()
const uhrzeit = document.createElement('input');
uhrzeit.type = 'time';
uhrzeit.step = String(15 * 60); // Einheit: Sekunden!
uhrzeit.value = '09:00';
uhrzeit.stepUp();
console.log(uhrzeit.value);
uhrzeit.stepUp(2);
console.log(uhrzeit.value);Schrittweite eines Reglers dynamisch umschalten
const regler = document.querySelector('#lautstaerke'); // <input type="range" min="0" max="100">
const fein = document.querySelector('#feinmodus'); // <input type="checkbox">
fein.addEventListener('change', () => {
regler.step = fein.checked ? '1' : '10';
console.log(`Schrittweite: ${regler.step}`);
});// Wichtig · Fallstricke
- String, keine Zahl:
stepliefert immer einen String. Für BerechnungenNumber(input.step)verwenden und den Fall"any"bzw.""gesondert behandeln. - Einheit bei Zeitfeldern: Bei
timeunddatetime-localist die Einheit Sekunden –step = "15"bedeutet 15 Sekunden, nicht Minuten. Ein Schritt unter 60 blendet in vielen Browsern zusätzlich ein Sekundenfeld ein. - Schrittbasis: Gültige Werte berechnen sich ab
min(bzw. demvalue-Attribut). Beimin="1"undstep="5"sind 1, 6, 11 … gültig, nicht 5, 10, 15. - Ungültige Werte wie
"0", negative Zahlen oder Text werden ignoriert; es gilt dann der Standardschritt. Ein Fehler wird nicht geworfen. - Gleitkomma: Browser runden intern, bei sehr kleinen Schritten (z. B.
0.001) kann die Validierung dennoch unerwartet ausfallen. - Bei nicht unterstützten Typen (z. B.
text) hatstepkeine Wirkung.stepMismatchwird nur bei der Validierung geprüft; der Browser korrigiert keine manuell eingetippten Werte. - Die Eigenschaft wird von allen modernen Browsern unterstützt; die Darstellung der Bedienelemente (Spinner, Datumsauswahl) ist aber browserspezifisch.