Wachsende Inputfelder mit jQuery

Hau' in die Tasten, Baby!

Vor kurzem haben wir überlegt, wir wir Kontaktformulare noch spannender gestalten können. In jedem Kontaktformular oder sonstigem Online-Formular sieht man schöne, machmal auch weniger schöne Inputfelder. Und wenn sie dann doch mal schön sind, nehmen sie trotzdem viel Platz in Anspruch. Was hilft da? Genau! Platz sparen und Felder auf ein Minimum reduzieren. Wir erklären in folgendem Artikel wie das mittels kleinem Javascript/jQuery Snippet und CSS funktioniert.

Damit ein jeweiliges Inputfeld weiß, wie lang es sein soll oder wie weit es wachsen soll, muss ein Platzhalter her. Dieser wird per Javascript mit einem span-Element erzeugt und - genauso wie das Inputfeld - einer Variable zugewiesen. Da zu Beginn noch kein Inhalt im erzeugten leeren span-Element vorhanden ist, wird die Variable dafür leer angelegt.

var inputField = $('input.growing'),
hiddenSpan = $(document.createElement('span')),
content = null;

Nun wird das erzeugte span-Element unten an der Seite angehängt, damit es durch die Benutzereingabe fröhlich mit Zeichen gefüllt werden kann

$('body').append(hiddenSpan);

Danach werden Klassen zu den weiligen Elementen hinzugefügt, damit notwendige Formatierungen per CSS vorgenommen werden können

inputField.addClass('myInputfield');
hiddenSpan.addClass('hiddenSpan');

Das verstecke span-Element wird logischerweise ausgeblendet, da es für die Seitenbesucher nicht sichtbar sein soll. Das Inputfeld bekommt den font-style und die font-size des body verpasst, damit sich die Formatierung des Inputfeldes mit der des body bzw. mit dem versteckten span-Element deckt.

Nun kommt der spannende Teil:

$('body').append(hiddenSpan);
inputField.on('keyup', function () {                
content = $(this).val();
hiddenSpan.text(content);
$(this).css('width', hiddenSpan.outerWidth(true));
});

Sobald Buchstaben in das Inputfeld eingetragen werden, soll sich dieser Inhalt auf das span-Element übertragen, sodass eine Breite ermitteln werden kann und diese Breite wiederum auf das Inputfeld übertragen wird.

Eine tolle Sache, wir wir finden. Wenn man damit etwas rumspielt und die Inputfelder schön gestaltet, dabei die Usabilty (wie beispielsweise visuelles Feedback) beachtet, lassen sich grandiose Formulare bzw. Inputfelder herstellen.

Was sagt ihr zu der Methode und wie schafft ihr attraktive Kontaktformulare? Wir freuen uns auf euer Feedback!

Text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
Bild des Benutzers florian
Erstellt von florian
15.06.2015 - 18:22
0 Kommentare

Aus der Kategorie

Tipps & Tricks