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.

Meinungen und Kommentare

Needed to post you a very little note to help say thank you once again for your personal exceptional guidelines you've featured in this article. It was really pretty generous with you to offer unreservedly all many of us would've distributed as an electronic book to make some dough for their own end, mostly since you might well have tried it in the event you wanted. Those tactics likewise served as a good way to be sure that many people have similar dream the same as my very own to figure out very much more with reference to this problem. I think there are lots of more fun situations up front for individuals who check out your site.
irving shoes http://www.kyrieirving-shoes.us.com

I precisely desired to say thanks again. I am not sure the things I would've tried in the absence of the type of tips and hints shown by you directly on that area. It was a scary scenario in my position, but coming across your skilled fashion you resolved that forced me to leap over fulfillment. I'm just happy for this service as well as expect you recognize what an amazing job that you're doing instructing some other people by way of your blog post. Probably you haven't got to know all of us.
nike react http://www.nikereact.org

I enjoy you because of all of the labor on this web page. My niece loves doing research and it is obvious why. A number of us learn all regarding the compelling form you convey rewarding tricks via the blog and foster contribution from others on that subject while our simple princess is actually studying a whole lot. Have fun with the rest of the year. You're the one carrying out a splendid job.
jordan retro 6 http://www.jordan6.us.com

I enjoy you because of each of your labor on this site. My daughter really likes going through investigation and it's easy to understand why. A number of us notice all regarding the powerful manner you render very helpful solutions via your website and in addition strongly encourage participation from others on the concept so our daughter is without a doubt understanding so much. Take advantage of the remaining portion of the new year. You're the one conducting a first class job.
yeezy boost 350 v2 http://www.yeezyboost350v2shoes.us.com

I wish to express my thanks to you just for rescuing me from this type of situation. Just after looking throughout the world-wide-web and meeting proposals which are not powerful, I thought my life was well over. Existing devoid of the answers to the issues you have sorted out through your guide is a crucial case, as well as those that would have in a wrong way damaged my entire career if I hadn't encountered your blog post. Your actual knowledge and kindness in handling a lot of stuff was invaluable. I'm not sure what I would have done if I had not come upon such a thing like this. I can now look ahead to my future. Thank you very much for your reliable and amazing help. I won't hesitate to recommend your blog post to anybody who needs direction about this matter.
cheap jordans http://www.shoesjordan.us.com

Bild des Benutzers florian
Erstellt von florian
15.06.2015 - 18:22
5 Kommentare

Aus der Kategorie

Tipps & Tricks