Sprung zum Inhalt [S] Tastaturkürzel / Accesskeys [0]
webdesign weisshart Startseite

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

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

  1. Nette Idee! Habe ich sofort eingebaut. Danke!

    Kommentar von Gerd — Dienstag, 26. Februar 2008 - 12:23 Uhr

  2. 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

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 &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Partnerseiten: barrierefreies WebDesign

Tastaturkürzel

nach oben