UX meets Dev: Eine <textarea> mal anders

Von Christian Otto |

Setzt man Formular-Bereiche in einer Web-Applikation um, kommt man spätestens beim Bedarf nach Eingabe größerer Textmengen nicht um eine <textarea> herum. Doch leider ist dieses native HTML-Element in so mancher Hinsicht limitiert beziehungsweise bringt einige Besonderheiten mit sich.

  • Man kann zwar eine Hintergrund-Grafik zuweisen, sofern man aber nicht mittels !important die CSS-Spezifität hochschraubt, verschwindet diese beim Focus oder wenn die Textarea nicht leer ist.

  • Größtes Manko meiner Meinung nach: Die <textarea> wächst nicht mit ihrem Content mit. Zwar kann ich mit den Attributen „rows“ und „cols“ sowie im Style mittels „width“ und „height“ eine bestimmte Größe vorsehen, aber oftmals ist die Box dann zu groß oder erzeugt zu früh Scrollbars.

  • Intrinsic sizing funktioniert leider auch nicht, das heißt, ein Versuch wie „min-height: min-content;“ scheitert auch, um die Box mindestens auf die Höhe ihres Content zu strecken.

Idee: Wir machen uns das „contenteditable“ Attribut zunutze, um aus einem einfachen <div> eine eigene <textarea> zu zaubern.

 <div contenteditable="true">Placeholder text</div>

Damit stehen uns aus Styling-Sicht natürlich alle Wege offen: Wir haben die Größenanpassung, das Overflow- sowie Textwrapping-Verhalten und vieles mehr voll unter Kontrolle. Bei Bedarf lassen sich auch noch Third-party-libraries einsetzen, die die möglicherweise erforderlichen, nativen Scrollbars ersetzen.

Klar, was uns hier natürlich verloren geht, ist der mögliche Bezug zu einem Formular, wir müssen zum Beispiel mittels Javascript selbst darauf „hören“, was mit der Box und ihrem Content passiert, um dann den Inhalt/Wert der „Textarea“ bei Formularabsendung parat zu haben. Das sollte aber mit einem keyup-Event und dem Auslesen des innerText des <div> keine allzu schwere Aufgabe sein. Den Placeholder-Text kann man onfocus() auch genau so schnell verschwinden lassen, wie er onblur() gegebenenfalls wieder zurückgeholt wird.

Und, seien wir mal ehrlich, so etwas wie eine Resize-Funktion kann man bei Bedarf auch immer noch nach implementieren (z.B. mittels jQueryUI resizable).

Senior Software Engineer

Christian Otto

Christian Otto startete 2007 als erster Mitarbeiter von MAXIMAGO. Seit Beginn seiner Ausbildung (noch vor der Jahrtausendwende!) hat der gelernte Mediengestalter einen Fokus auf die Onlinewelt und dabei einiges miterlebt: Von Microsoft Frontpage, Macromedia Dreamweaver bis zu Flash. Außerdem hat er Ausflüge in WPF und Silverlight unternommen. Heute liegen seine technische Vorlieben in allem rund um CSS und Control-Entwicklung.

Mehr zu Christian Otto