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

Underscore.string – String Manipulation für ... Drücken wir es nett aus: JavaScript und Strings sind keine guten Freunde. Vielleicht bin ich da etwas zu verwöhnt, aber ein bisschen geschickter hätte...
Besserer Redirect mit jQuery Bei jQuery4U bin ich auf einen Artikel aufmerksam geworden, der in seiner Logik nicht zu überbieten ist! :) Jeder von uns benutzt wohl ab und an die l...
melonJS – Spieleentwicklung in HTML5 Spieleentwicklung in HTML5 ist "the next big thing" - aber das ist nicht wirklich was Neues. Es geht inzwischen auch nicht mehr wirklich um das ob, so...
Animierte Sprites in jQuery ohne Flash Ich gebe zu das ich ein echter Fan von vektorbasierenden Blog-Headern bin. Noch cooler wäre es allerdings, wenn die Teile animiert wären, dafür gäbe e...

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.