HTMLTextAreaElement.rows — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.rows

Beschreibung

Die Eigenschaft rows gibt an, wie viele Textzeilen ein <textarea> ohne Scrollen anzeigt. Sie spiegelt das HTML-Attribut rows wider: Wenn du die Eigenschaft änderst, ändert sich auch das Attribut, und umgekehrt. Der Wert ist eine positive ganze Zahl (unsigned long). Fehlt das Attribut oder ist es ungültig, liefert die Eigenschaft den Standardwert 2.

Typische Einsatzfälle sind Eingabefelder, die sich an ihren Inhalt anpassen (Auto-Grow), Kommentarfelder, die beim Fokussieren größer werden, und Formulare, deren Größe per Skript an einen Kontext angepasst wird, etwa eine kompakte Mobilansicht.

Wichtig: rows legt nur die Ausgangshöhe fest. Setzt CSS eine height, gilt diese und rows wird für die Darstellung ignoriert. Wie hoch eine Zeile tatsächlich ist, hängen von line-height, Schriftgröße, padding und box-sizing ab. Die Breite steuerst du analog mit cols.

Parameter

Name	Typ	Default	Beschreibung
$value	number	2	Nur beim Setzen: gewünschte Zeilenzahl. Werte zwischen `1` und `2147483647` werden übernommen. `0`, negative Zahlen und zu große Werte setzen das Attribut auf den Standardwert `2`. Nachkommastellen werden abgeschnitten.

Rückgabewert

Typ

number

Beschreibung

Die aktuelle Anzahl sichtbarer Zeilen als positive ganze Zahl. Fehlt das Attribut rows oder ist es ungültig, ist der Wert 2.

Beispiele

Zeilenzahl lesen und setzen

// HTML: <textarea id="nachricht" rows="4"></textarea>
const textarea = document.querySelector('#nachricht');

console.log(textarea.rows); // 4

textarea.rows = 8;
console.log(textarea.getAttribute('rows')); // "8"

4 "8"

Standardwert und ungültige Werte

const ta = document.createElement('textarea');
console.log(ta.rows); // 2 – kein Attribut vorhanden

ta.setAttribute('rows', 'abc');
console.log(ta.rows); // 2 – ungültiger Attributwert

ta.rows = 0;
console.log(ta.rows); // 2 – 0 ist nicht erlaubt, Standardwert wird gesetzt

ta.rows = 5.9;
console.log(ta.rows); // 5 – Nachkommastellen werden abgeschnitten

2 2 2 5

Auto-Grow: Höhe an Zeilenanzahl anpassen

// HTML: <textarea id="kommentar" rows="3"></textarea>
const kommentar = document.querySelector('#kommentar');
const MIN_ROWS = 3;
const MAX_ROWS = 12;

const anpassen = () => {
  const zeilen = kommentar.value.split('\n').length;
  kommentar.rows = Math.min(MAX_ROWS, Math.max(MIN_ROWS, zeilen));
};

kommentar.addEventListener('input', anpassen);
anpassen();

Beim Fokussieren vergrößern

const feld = document.querySelector('textarea.kompakt');

feld.addEventListener('focus', () => { feld.rows = 6; });
feld.addEventListener('blur', () => {
  // nur verkleinern, wenn das Feld leer ist
  if (feld.value.trim() === '') feld.rows = 1;
});

// Wichtig · Fallstricke

CSS hat Vorrang: Setzt CSS eine height (oder block-size), hat das Ändern von rows keine sichtbare Wirkung. Das gilt auch, wenn der Nutzer das Feld über den Anfasser (resize) vergrößert oder verkleinert hat, denn dann steht ein Inline-height am Element.
Umgebrochene Zeilen: value.split('\n') zählt nur echte Zeilenumbrüche. Automatisch umbrochene lange Zeilen zählt es nicht mit. Für ein genaues Auto-Grow ist oft scrollHeight besser, oder in modernen Chromium-Browsern die CSS-Eigenschaft field-sizing: content (in Firefox/Safari noch nicht überall verfügbar).
Keine Ausnahme bei 0: Anders als bei manchen anderen gespiegelten Attributen, die nur positive Werte erlauben, löst rows = 0 keinen IndexSizeError aus. Der Wert fällt still auf 2 zurück.
Kein Längenlimit: rows begrenzt nicht, wie viel Text eingegeben werden kann. Dafür gibt es maxLength.
Die Eigenschaft wird von allen gängigen Browsern seit jeher unterstützt.

Siehe auch

HTMLTextAreaElement HTMLTextAreaElement.cols HTMLTextAreaElement.wrap HTMLTextAreaElement.maxLength HTMLTextAreaElement.value Element.scrollHeight HTMLMeterElement.low