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


Ninja User Interface – Schicke Widgets für jQuery...
Alleine schon wegen dem Namen „jQuery Webjutsu“ ist die Ninja UI erwähnenswert. Es sollte sich inzwischen bis in die hintersten Ecken herumgesprochen ...


jQuery.sheet – Excel Spreadsheets für jQuery
Es gibt da durchaus ein oder zwei Sachen, in denen man sich in Javascript die Finger bricht und man froh ist, dass es zum Beispiel jQuery gibt. Sinnvo...


Boxjs – Script Loading mittels CDN
Es gibt inzwischen einige Skripte die sich mit nichts anderem beschäftigen, als die eigentlichen Skripte, die man auf der Webseite benötigt, nachzulad...


Lettering.js für jQuery
Ich fürchte die Sache mit den Webfonts ist noch lange nicht ausgestanden, zum einen kämpft man ständig mit Unstyled Content, zum anderen können die Br...

Kommentare

  1. Pingback: jQuery: Resize von Textareas | Das Örtchen

  2. Jan

    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

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.