HTMLInputElement.size — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.size

Beschreibung

Die Eigenschaft size des HTMLInputElement-Interfaces spiegelt das HTML-Attribut size wider. Sie legt fest, wie viele Zeichen in einem Eingabefeld ungefähr gleichzeitig sichtbar sind – also die Anzeigebreite, nicht die maximal erlaubte Eingabelänge. Der Wert ist eine positive Ganzzahl (unsigned long); fehlt das Attribut oder ist es ungültig, liefert die Eigenschaft den Standardwert 20.

Wirksam ist size nur bei textartigen Feldern: text, search, tel, url, email und password. Bei anderen Typen wie number, date oder checkbox wird das Attribut vom Browser ignoriert, die Eigenschaft lässt sich aber trotzdem lesen und schreiben.

Die tatsächliche Pixelbreite hängt von der Schriftart ab, da der Browser mit einer durchschnittlichen Zeichenbreite rechnet. Für pixelgenaue Layouts ist CSS (width, oder ch-Einheiten) die bessere Wahl; size eignet sich vor allem für einfache Formulare oder als sinnvolle Vorgabe, wenn kein CSS greift. Wer die Eingabelänge begrenzen will, braucht maxLength.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	number	20	Positive Ganzzahl größer als `0`. Wird intern in eine vorzeichenlose Ganzzahl umgewandelt und als Attribut `size` geschrieben.

Rückgabewert

Typ

number

Beschreibung

Die Anzahl der sichtbaren Zeichen als positive Ganzzahl. Fehlt das Attribut oder ist es ungültig (z. B. 0, negativ oder kein Zahlwert), wird 20 zurückgegeben.

Beispiele

Größe lesen und Standardwert erkennen

// <input id="plz" type="text" size="5">
// <input id="name" type="text">
const plz = document.getElementById('plz');
const name = document.getElementById('name');

console.log(plz.size);  // explizit gesetzt
console.log(name.size); // kein Attribut -> Standardwert

5 20

Feldbreite dynamisch an den Inhaltstyp anpassen

const feld = document.querySelector('#kennung');
const auswahl = document.querySelector('#art');

const breiten = { plz: 5, iban: 34, telefon: 15 };

auswahl.addEventListener('change', () => {
  feld.size = breiten[auswahl.value] ?? 20;
  console.log(`Neue Breite: ${feld.size} Zeichen`);
  console.log(feld.getAttribute('size')); // Attribut wird mitgesetzt
});

Neue Breite: 34 Zeichen 34

Ungültige Werte abfangen

const input = document.createElement('input');

try {
  input.size = 0; // 0 ist nicht erlaubt
} catch (err) {
  console.log(err.name);
}

input.setAttribute('size', 'abc'); // ungültiges Attribut
console.log(input.size);

IndexSizeError 20

// Wichtig · Fallstricke

Nicht mit maxLength verwechseln: size steuert nur die Anzeigebreite. Nutzer können trotzdem beliebig viele Zeichen eingeben.
Der Wert 0 wirft einen Fehler: Wird size = 0 gesetzt, wirft der Browser eine DOMException vom Typ IndexSizeError. Negative Zahlen werden in große vorzeichenlose Werte umgewandelt oder führen ebenfalls zum Fehler – prüfe Eingaben deshalb vorher.
CSS hat Vorrang: Eine per CSS gesetzte width überschreibt die aus size berechnete Breite. Für eine zeichenbasierte Breite per CSS bietet sich width: 10ch an.
Ungenau bei Proportionalschrift: Die Breite beruht auf einer durchschnittlichen Zeichenbreite; breite Zeichen wie „W“ passen oft nicht vollständig hinein.
Nicht verwechseln mit HTMLSelectElement.size: Dort bedeutet size die Anzahl sichtbarer Zeilen, und der Standardwert ist 0.
Browserunterstützung: seit jeher in allen Browsern vorhanden.

Siehe auch

HTMLFontElement.size HTMLInputElement.files HTMLInputElement.list HTMLInputElement.min HTMLInputElement.name