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.
Kommentar hinzufügen