Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Stretchy: JavaScript zur automatischen Größenanpassung von Formularen

Stretchy. (Screenshot: Stretchy)

Erneut ist es die bekannte Entwicklerin Lea Verou, die uns ein praktisches Helferlein für die tägliche Webentwicklung an die Hand gibt: Stretchy ist ein kleines JavaScript, das nichts weiter tut, als beliebige Formularfelder automatisch der Länge des eingegebenen Inhalts anzupassen. Wer das eigentlich (unter anderem) für solche Zwecke vorgesehene HTML-Element contentEditable kennt, wird wissen, dass fast jede Alternative hierzu eine willkommene ist.

Stretchy: Weil contentEditable nix taugt

Denn wer sich mit contentEditable auseinandersetzt, kommt selten zu einer positiven Einschätzung. Besonders ausführlich hat sich der Entwickler Nick Santos in seinem sprechend betitelten Beitrag „Why ContentEditable is Terrible” im Medium-Entwickler-Blog mit der Thematik befasst.

Auch Lea Verou musste sich im Rahmen ihrer neuen Aufgaben am MIT gezwungenermaßen mit contentEditable und anderen Alternativen befassen. Ihr jüngstes Projekt erfordert das Bearbeiten großer Mengen schon im Web vorhandener Inhalte. Entsprechend suchte sie nach einer möglichst einfachen, aber stabilen Lösung – fand aber keine.

Stretchy passt Formularfelder automatisch an
Stretchy: JavaScript zur automatischen Größenanpassung für Formularfelder (Screenshot: lea.verou.me)

Wie man es von Lea gewohnt ist, war das Fehlen einer für sie tauglichen Lösung nur eine Motivation, selbst eine zu schaffen. So entstand Stretchy. Stretchy ist ein sehr kleines JavaScript mit einem Gewicht von nur 1,5 Kilobyte komprimiert. Abhängigkeiten kennt es nicht. Das Einbinden von jQuery oder anderen Frameworks ist zumindest für Stretchy nicht erforderlich.

Stretchy: Set it and forget it

Da Stretchy für die nachträgliche Einbindung geschaffen wurde, arbeitet es problemlos mit vorhandenen Designs und Styles zusammen. Das JavaScript ändert das Aussehen vorhandener Elemente grundsätzlich nicht. Da es im Standard nach dem Prinzip des „Set it and forget it“ – also „Starte es einmal, dann vergiss es“, gebaut ist, benötigt es neben dem eigentlichen Funktionsaufruf keine weiteren Parameter am jeweiligen Element.

Nachdem man das Script in die betreffende Seite eingebunden hat, wirkt es sich automatisch auf alle Formularfelder, wie <textarea>, <select> und <input> aus und sorgt dafür, dass sie sich beim Eingeben der Inhalte in der Größe anpassen. Dabei dürfen auch Vorgabewerte und Platzhalter vorhanden sein. So sieht der Aufruf aus:

<script src="stretchy.min.js" async></script>

Solltest du allerdings doch nicht alle in Frage kommenden Elemente in dieser Weise behandelt wissen wollen, bietet Stretchy optional den Einsatz eines HTML5-Data-Attributes namens data-stretchy-filter an. Das kann dann an jedem Element, das nicht von Stretchy behandelt werden soll, eingesetzt werden. Alternativ ist es möglich, das Data-Attribut direkt beim Aufruf des Scripts zu setzen und entsprechende Klassen von der Behandlung durch Stretchy auszuschließen. Das kann dann so aussehen:

<script src="stretchy.min.js" data-filter=".foo, .foo *" async></script>

Generell ist es nicht nötig, sich mit JavaScript auszukennen. Alle Anpassungen erfolgen via HTML. Durch die Integration von Mutation-Observern (Veränderungsbeobachtung) werden auch später hinzugefügte Elemente zuverlässig von Stretchy behandelt. Das funktioniert natürlich nur mit Browsern, die Mutation-Observer unterstützen.

Stretchy und die Browserkompatibilität

Der letztgenannte Punkt weitet sich zum altbekannten Kompatibilitätsproblem aus. Wie so häufig, wenn es um moderne Lösungen geht, müssen alte Browserversionen fallen gelassen werden. Das hat Lea Verou konsequenterweise auch getan. Stretchy funktioniert einwandfrei in allen modernen Browsern – als da wären der Internet Explorer ab Version 11, Firefox ab 39, Chrome ab 44, Safari ab 8, Opera ab 30 und die aktuellen Versionen der Mobilbrowser unter iOS und Android.

Stretchy steht auf GitHub zum Download und zur Mitwirkung zur Verfügung. Das JavaScript wird unter der liberalen MIT-Lizenz verbreitet und kann daher privat und kommerziell kostenfrei eingesetzt werden.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst