HTMLInputElement.max — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.max

Beschreibung

Die Eigenschaft max spiegelt das HTML-Attribut max eines <input>-Elements wider. Sie ist ein String und legt die Obergrenze für gültige Werte fest. Sie wirkt bei den Typen number, range, date, month, week, time und datetime-local. Bei anderen Typen wie text oder email wird sie ignoriert.

Wenn Sie die Eigenschaft setzen, ändert sich auch das Attribut im DOM, und umgekehrt. Fehlt das Attribut, ist der Wert ein leerer String "". Das Format hängt vom Eingabetyp ab: Bei number/range ist es eine Gleitkommazahl wie "100" oder "2.5", bei date das Format "YYYY-MM-DD", bei time "HH:MM", bei month "YYYY-MM" und bei week "YYYY-Www".

Typische Einsatzfälle sind abhängige Formularfelder, etwa ein Abreisedatum, das nicht vor dem Anreisedatum liegen darf, oder eine Bestellmenge, die auf den Lagerbestand begrenzt wird. Liegt der Wert über max, setzt der Browser validity.rangeOverflow auf true und das Formular gilt bei der Validierung mit Constraint Validation als ungültig. Außerdem trifft die CSS-Pseudoklasse :out-of-range zu.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: neue Obergrenze als String im passenden Format des Eingabetyps. Zahlen werden automatisch in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des max-Attributs oder "", wenn kein Attribut gesetzt ist.

Beispiele

Obergrenze lesen und setzen

// <input type="number" id="menge" min="1" max="10">
const menge = document.querySelector('#menge');
console.log(menge.max);          // "10"
console.log(typeof menge.max);   // "string"

menge.max = 25;                  // wird zu "25"
console.log(menge.getAttribute('max'));

10 string 25

Abreisedatum an Anreisedatum koppeln

// <input type="date" id="anreise"> <input type="date" id="abreise">
const anreise = document.querySelector('#anreise');
const abreise = document.querySelector('#abreise');

// Anreise darf höchstens ein Jahr in der Zukunft liegen
const inEinemJahr = new Date();
inEinemJahr.setFullYear(inEinemJahr.getFullYear() + 1);
anreise.max = inEinemJahr.toISOString().slice(0, 10);

// Anreise darf nicht nach der Abreise liegen
abreise.addEventListener('change', () => {
  anreise.max = abreise.value; // Format "YYYY-MM-DD"
});

Bestellmenge auf Lagerbestand begrenzen und prüfen

// <input type="number" id="anzahl" min="1">
const anzahl = document.querySelector('#anzahl');

const ladeBestand = async (artikelId) => {
  // Ersatz für einen echten API-Aufruf
  return { artikelId, bestand: 5 };
};

const init = async () => {
  const { bestand } = await ladeBestand(42);
  anzahl.max = bestand;

  anzahl.value = '8';
  console.log(anzahl.validity.rangeOverflow); // true
  console.log(anzahl.checkValidity());        // false
  console.log(Number(anzahl.max) - 1);        // Zahl statt String
};

init();

true false 4

Attribut entfernen

const feld = document.createElement('input');
feld.type = 'range';
feld.max = '50';
console.log(feld.max);   // "50"

feld.removeAttribute('max');
console.log(feld.max);   // ""
console.log(feld.value); // Standardwert bei range: Mitte von 0–100

50 50

// Wichtig · Fallstricke

Immer ein String: el.max liefert z. B. "10", nicht 10. Wandeln Sie den Wert vor Berechnungen mit Number() oder parseFloat() um, sonst verkettet el.max + 1 Strings ("101").
Keine harte Sperre: Nutzer können größere Werte eintippen, und per Skript lässt sich value beliebig setzen. max sorgt nur dafür, dass die Validierung fehlschlägt (validity.rangeOverflow). Die Pfeiltasten und Schieberegler halten die Grenze dagegen ein. Eine serverseitige Prüfung ist trotzdem immer nötig.
Ungültiges Format: Passt der String nicht zum Eingabetyp (z. B. "31.12.2024" bei type="date"), wird die Obergrenze stillschweigend ignoriert.
max kleiner als min: Bei range wird max dann auf min gesetzt. Bei time ist das erlaubt und bedeutet einen Zeitraum über Mitternacht.
Bei range gilt ohne Attribut der Standardwert 100, el.max liefert trotzdem "".
Nicht zu verwechseln mit maxLength: Diese Eigenschaft begrenzt die Zeichenzahl bei Texteingaben.
Kompatibilität: wird von allen modernen Browsern unterstützt. Die Unterstützung für week und month ist in Safari und Firefox (Desktop) eingeschränkt, weil diese Typen dort teils als Textfeld dargestellt werden.

Siehe auch

HTMLInputElement.min HTMLInputElement.alt HTMLInputElement.name HTMLInputElement.src HTMLInputElement.form