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

In Place Editing mit jQuery In Place Editing ist das nächste große Ding, aber was heisst das eigentlich? Normalerweise funktionieren die meisten CMS über ein Backend, und ein Fro...
Moderne JavaScript DevTools in Chrome Alles ändert sich, auch JavaScript. Oder besser gesagt die Art wie JavaScript eingesetzt wird. Früher ist man mit den DevTools von Chrome hingegangen ...
Bildeffekte in JavaScript mit glfx.js Bilder erst auf dem Client zu manipulieren wird immer beliebter, vor allem wenn es um Animationen geht. Ich kann mich da noch an eine Zeit erinnern, w...
AutoSuggest mit jQuery Das Auto-Completing bzw. Ajax-Angetriebene Suchen werden ja im Internet immer beliebter, allerdings haben die Teile bei falscher Programmierung die An...

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