Das Örtchen RSS-Feed
Kategorie
Kategorie: Blog
Buttons & Statistiken
Neueste Kommentare

jQuery: Resize von Textareas

Im Rahmen eines Projekts habe ich nach Usability-Verbesserungen für Textareas gesucht. Da das Projekt WordPress nutzt und jQuery sich schon im Lieferumfang des CMS-Cores befindet, habe ich mich bei meiner Suche speziell auf jQuery-Plugins konzentriert. WYSIWYG-Editoren (bzw. Editoren im Allgemeinen) waren jedoch nicht gewünscht und es sollte auch kein WordPress-Plugin sein.

Die Recherche

Als erstes fand ich diverse Plugins, die 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 meist ein Problem in der Umsetzung, so bewegte sich bei Autoresize und Elastic die Oberkante des Textes beim Resize-Vorgang und bei einem anderen Plugin tauchte in diesem Moment immer ein Scrollbalken in der Textarea auf. Keine dieser Lösungen wirkte wirklich professionell auf mich.

Also entschied ich mich gegen das Autoresize und für ein manuelles Resize. Da ich ein anderes Feature inzwischen mittels jQuery UI umgesetzt hatte, sah ich mich als nächstes in dieser JavaScript-Bibliothek um und wurde mit Resizable fündig. Ein kurzer Blick in den Codex von wp_enqueue_script zeigte mir, daß das nötige JavaScript schon als jquery-ui-resizable verfügbar ist. Leider bekam ich auch nach einigen Stunden keine optisch akzeptable Lösung hin, da ich mit dem nötigen CSS nicht zurecht kam.

Die Lösung

Also suchte ich weiter und fand eine mir schon aus Drupal bekannte Lösung mit dem Namen TextArea Resizer. Das jQuery-Plugin funktionierte sofort, da es alle nötigen Dateien (JavaScript, Grafiken und CSS) direkt mitlieferte. Lediglich ein kleiner Bug störte mich und zwar tauchte im Firefox 3 während des Resize-Vorgangs am linken Rand der Textarea ein Text-Cursor auf, der die Höhe der kompletten Textarea hatte. Nach einigen Tests stellte sich heraus, daß das Problem durch die Zeile 42 in der (unkomprimierten) Datei jquery.textarearesizer.js verursacht wird.

 textarea.blur(); 

Nach dem Löschen dieser Zeile konnte ich in keinem Browser mehr Probleme bemerken.

Fazit

Die Lösung funktioniert nun wunderbar in meinem Test-Code, es gab lediglich noch ein kleines Problem mit Chrome/Safari, da diese eine eigene Resize-Möglichkeit für Textareas mitbringen und sich die Handler dieser beiden Lösungen scheinbar etwas überschneiden.

 resize: none; 

Da zwei Möglichkeiten aus meiner Sicht unnötig sind, habe ich mittels CSS3 den Browser-Resize deaktiviert.

Hallo! Bist du neu hier? Dann abonniere doch den RSS-Feed dieses nicht mehr ganz so stillen Örtchens, um über meine geistigen Ergüsse auf dem Laufenden zu bleiben. Alternativ besteht auch die Möglichkeit, sich von FeedBurner per E-Mail über meine Ausscheidungen benachrichtigen zu lassen.

Neuen Kommentar schreiben

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
Der Inhalt dieses Feldes wird öffentlich zugänglich angezeigt, aber als rel="nofollow" markiert.
Hinweis

Kommentare beleben den Blog! Ich freue mich über jeden Kommentar. Du kannst hier offen Deine Meinung zum Artikel sagen, aber bitte beachte die Netiquette und vermeide es andere zu beleidigen.

Bitte unterlasst es die Kommentare zu SEO-Zwecken zu missbrauchen. Kommentare mit Links, die nicht zu Blogs führen (oder zu Blogs mit Grauzonen-Themen) und/oder Keywords als Namen verwenden, sind nicht erwünscht!

Möchtest Du mir einen Blog-Artikel schmackhaft machen, dann schreib die URL ohne HTML-Tag in den Kommentarbereich und ich werde diesen bei Gefallen verlinken.