Autoresize von Textareas mit jQuery

Textareas sind immer so eine Sache: egal wie groß man sie macht, der Kunde findet sie zu klein. Auch die Breite der Eingabe ist oft problematisch, da sich zumindest die Kollegen von der schreibenden Zunft stundenlang mit passenden Zeilenumbrüchen beschäftigen können. Ich bin ein großer Fan der Eingabe bei Facebook. Die Textareas ist zwar nicht variabel in der Breite, aber in der Höhe!

Demo des Autoresize Plugins für jQuery

Heißt: Wenn ich viel tippe, wird die Textarea immer größer und ich sehe meinen Text auf einen Blick, ohne in dem Eingabefeld herumscrollen zu müssen. Ab einem gewissen Punkt macht das vergrößern der Textarea logischerweise keinen Sinn mehr, aber es ist ein perfektes Beispiel für eine gelungene Usability.

Das jQuery Plugin „autoresize“ animiert das Vergrößern der Textarea und macht genau, was wir wollen: Die Höhe der Textarea der Länge des eingegebenen Texts anpassen. Wer es einfacher will und keine Animation wünscht, kann auch dieses Skript verwenden. Alles in allem eine sehr gelungene Sache, wie ich finde, die Kunden nicht nur beeindruckt sondern auch einen nachhaltigen Nutzen mit sich bringt.

Ähnliche Beiträge

Intelligentes Cropping von Bildern für Responsive Wenn man sich mal so umschaut im Bereich Responsive Websites könnte man durchaus die folgenden Eindrücke gewinnen: a) Wir machen das weil wir müssen, ...
TinyMCE in Version 3.2.2 veröffentlicht 4 Monate hat es gedauert, aber nun ist sie da, die neue Version von TinyMCE. Stellt sich nur die Frage, was eigentlich neu ist. Zunächst einmal ist zu...
Notifier für Benutzer-Nachrichten in jQuery Jede halbwegs vernünftige Community-Software oder Internet-Anwendung braucht ein Nachrichten-System, um demjenigen angemeldeten Benutzer, der gerade a...
Catch404 – 404 mit jQuery Abfangen 404 sind eine sehr unschöne Sache, vor allem bei einer internen Verlinkung. Hier kann man aber zumindest durch Studieren der Log-Files merken, das etw...

2 Kommentare

  • […] ein Autoresize von Textareas umsetzen. Ende letzten Jahres hat Guido in seinem Blog unter anderem Autoresize vorgestellt, eine Alternative hierzu wäre beispielsweise Elastic. Doch alle diese Lösungen hatten […]

  • Danke für die Links. Leider hatten diese Autoresize-Lösungen (inkl. dem nicht erwähnten Elastic) das Problem, daß sich in allen getesteten Browsern außer Firefox 3 im Moment der Größenänderung die Textoberkante kurz bewegte. Dies sieht leider ein bisserl unprofessionell aus, weswegen ich mich für den aus Drupal bekannten manuellen Resize entschieden habe:

    http://plugins.jquery.com/project/TextAreaResizer

Schreibe einen Kommentar