Wachsende Textarea

Datum: Oktober 2025
Lesedauer: 2 Minuten

Ziel

Ein Eingabefeld, das seine Höhe automatisch an den Inhalt anpasst.
Beispiel:

Quelle: https://chat.com 

Problem

Mit den heute verfügbaren HTML-Elementen und einfachen CSS-Stilen ist es nicht möglich, ein Textfeld zu erstellen, das sich automatisch in der Höhe an den Inhalt anpasst. Weder <input> noch <textarea> vergrössern sich bei zunehmendem Inhalt automatisch in der Vertikalen.

Input

<input type="text" placeholder="Input"></input>

Textarea

Die Textarea verfügt zwar standardmässig über eine resize-Funktionalität, diese ist jedoch nicht dynamisch, sondern muss manuell vom Nutzer gesteuert werden.
In beiden Fällen passt sich also die Höhe nicht von selbst an.

<textarea placeholder="Textarea"></textarea>
<textarea placeholder="Textarea" style={{resize:"none"}}></textarea>

Contenteditable

Eine mögliche Lösung ist die Verwendung des contenteditable-Attributs (contentEditable in React).
Dieses passt die Grösse dynamisch an und wird z.B. auch in ChatGPT eingesetzt.

<span className="input" role="textbox" contentEditable></span>

Allerdings sollten für Benutzereingaben immer <input> (einzeilig) oder <textarea> (mehrzeilig) verwendet werden.
Eine solche Implementierung bringt einige Nachteile mit sich:

• Accessibility: Ein contenteditable-Element ist kein echtes Formularelement. Die Unterstützung für Screenreader und Tastaturbedienung ist eingeschränkt. role="textbox" kann helfen, ersetzt aber keine vollwertige A11y-Implementierung.
• Manuelle Umsetzung von Standardfunktionen: Placeholder, Validierung, HTML-Filterung bei Copy/Paste, … all das muss manuell implementiert werden.
• Formularverhalten: contenteditable-Elemente sind nicht nativ in das Formularverhalten integriert. Funktionen wie das Absenden auf Enter oder die Formularserialisierung erfordern zusätzliche Logik.
• Weitere Fallstricke: Unerwartetem Verhalten kann auftreten, wenn man nicht alle weiteren Punkte herausfindet und behandelt.

Lösungsvariante

Meine präferierte Lösung ist eine <textarea>, welche ihre Höhe (target.style.height) mit JavaScript an die Höhe des tatsächlichen Inhalts (target.scrollHeight) angleicht.

export function TextareaCustom() {
  const maxHeight = 120;
 
  const handleInput = (ev) => {
    const target = ev.target;
    target.style.height = "auto";
    if (target.scrollHeight > maxHeight) {
      target.style.height = `${maxHeight}px`;
    } else {
      target.style.height = `${target.scrollHeight}px`;
    }
  };
 
  // rows={1}         -> initial rows
  // resize:"none"    -> no user drag
  return (
    <textarea
      rows={1}
      placeholder="Custom Textarea"
      onInput={handleInput}
      style={{ resize: "none" }}
    ></textarea>
  );
}