Komfortable Formulare
Montag, 25. Februar 2008
Mehrzeilige Texteingabefelder in Formularen <textarea> sind auf den meisten Webseiten aus Designgründen viel zu klein. Häufig passen nur 5 oder 6 Zeilen in das Eingabefeld, dann erscheint ein Scrollbalken. Damit wird es äußerst unbequem, das Geschriebene zur Korrektur noch einmal zu lesen.
Safari-Nutzer können das Textfeld mit der Maus vergrößern, und Firefox-Nutzern steht eine gleichwertige Extension zur Verfügung, wie ich hier beschrieben habe.
Eine weitere, elegante Lösung habe ich kürzlich gefunden (ich weiß leider nicht mehr wo, dennoch danke an Unbekannt).
Mittels eines Javascript eventhandlers wird das Textfeld automatisch nach unten verlängert, sobald bei der Texteingabe die letzte sichtbare Zeile erreicht ist:
<textarea onkeyup="this.style.height=Math.max(this.scrollHeight,150) + ‘px’;this.style.overflow=’hidden’” …
Mit den 150 px Höhe muß man eventuell ein wenig experimentieren, um ein Springen der angezeigten Höhe zu vermeiden.
Diese Javascript-Lösung ist selbstverständlich unobtrusive, d. h. wenn Javascript nicht zur Verfügung steht, verhält sich das Texteingabefeld ganz normal, wie oben beschrieben.
Klar, dass ich das gleich hier mal probieren musste.
2 Kommentare
Einen Kommentar abgeben
XHTML erlaubt: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Code-Beispiele
Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu <).

Nette Idee! Habe ich sofort eingebaut. Danke!
Kommentar von Gerd — Dienstag, 26. Februar 2008 - 12:23 Uhr
Eine fast schon banale Lösung für ein alltägliches Problem.
Toller Beitrag. Vielen Dank.
Kommentar von Achim — Samstag, 1. März 2008 - 2:34 Uhr