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

jCookies – Cookies mit jQuery Cookies sind eine sinnvolle Sache, meistens mit dem Holzhammer verwendet. In der Regel werden sie entweder benutzt um eine Session in PHP zu kennzeich...
Chosen – Select-Boxen in Benutzerfreundlich Select-Boxen sind relativ benutzerfreundlich, so lange man nicht so viel Auswahl hat, und insbesondere nicht mehrere Werte der Box auswählen soll. Let...
JavaScript & Canvas anstatt Visio Das Canvas-Element kann schön zeichnen und die Entwicklung geht klar vom Desktop weg hin zur Cloud, was dann fehlt sind die entsprechenden Lösungen. N...
Modernizr – HTML5 und CSS3 mit Fallback Manchmal ist der Teufel ein Eichhörnchen, und scheinbar hat er sich an einem langen Winterabend überlegt, der beste Weg die Menschheit zu quälen wären...

2 Antworten auf „Autoresize von Textareas mit jQuery“

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