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

I intended to write you a very small word so as to give many thanks once again regarding the pleasant opinions you have shown above. This has been quite tremendously open-handed of you giving without restraint all that a lot of folks would've marketed as an electronic book in making some dough on their own, certainly seeing that you might well have done it in case you considered necessary. These good tips as well worked to be a good way to be sure that other people have the same zeal just like my very own to know a good deal more with reference to this issue. I think there are millions of more enjoyable situations in the future for folks who view your blog.
yeezy boost http://www.yeezy-boosts.us.com

I wish to show my appreciation for your generosity in support of folks who absolutely need assistance with this study. Your very own dedication to getting the message all over had become exceedingly productive and has surely enabled ladies just like me to get to their targets. The insightful facts entails a lot a person like me and further more to my peers. Warm regards; from everyone of us.
jordan retro 6 http://www.jordan6.us.com

I want to express some thanks to this writer just for rescuing me from this particular predicament. Right after researching throughout the world wide web and seeing ways which are not helpful, I figured my life was well over. Living devoid of the answers to the problems you have resolved as a result of this article is a serious case, as well as ones that could have adversely damaged my career if I hadn't discovered your website. Your own ability and kindness in handling all the details was tremendous. I don't know what I would've done if I hadn't discovered such a point like this. I can at this moment look forward to my future. Thanks very much for this reliable and effective guide. I will not think twice to suggest your site to anyone who should get tips on this subject matter.
birkin bag http://www.birkinbag.us.com

I would like to get across my appreciation for your generosity supporting those who absolutely need help with this particular question. Your special dedication to passing the message all-around became extraordinarily effective and have continuously encouraged girls like me to achieve their endeavors. Your amazing warm and helpful hints and tips signifies a whole lot to me and still more to my colleagues. With thanks; from all of us.
fitflops http://www.fitflops-saleclearance.us.com

I and my friends happened to be reading through the nice secrets and techniques found on your website while all of a sudden developed a terrible suspicion I never thanked the web site owner for those secrets. Those young men are actually passionate to read through all of them and have sincerely been taking advantage of those things. Appreciation for indeed being simply thoughtful and then for selecting some awesome ideas most people are really needing to learn about. My very own honest regret for not saying thanks to sooner.
hogan outlet http://www.hogan-outlet.us.com

I not to mention my pals were found to be examining the excellent helpful tips from your website then immediately developed an awful feeling I never expressed respect to the web blog owner for those secrets. These boys ended up consequently warmed to see all of them and already have truly been using these things. Thank you for really being quite helpful and then for making a decision on these kinds of helpful areas most people are really wanting to be informed on. My very own honest regret for not saying thanks to you sooner.
foamposites http://www.nikefoamposite.us.com

My husband and i ended up being now satisfied Edward managed to do his researching via the precious recommendations he obtained when using the blog. It is now and again perplexing to just happen to be handing out techniques other folks could have been making money from. Therefore we take into account we need the blog owner to thank because of that. The most important illustrations you've made, the easy web site navigation, the friendships you make it possible to engender - it's mostly excellent, and it is letting our son in addition to our family do think the matter is satisfying, and that is tremendously vital. Thanks for the whole lot!
coach outlet http://www.coachoutlets.name

A lot of thanks for your own hard work on this website. My niece really likes setting aside time for internet research and it's simple to grasp why. Many of us know all of the dynamic method you produce both useful and interesting solutions via your website and as well attract contribution from some others on that subject matter then our simple princess is certainly learning so much. Take advantage of the remaining portion of the new year. Your carrying out a pretty cool job.
bape hoodie http://www.bapehoodie.us

I am just commenting to let you understand what a magnificent discovery my friend's girl obtained visiting your site. She came to understand lots of details, not to mention what it is like to possess an incredible giving style to make other folks really easily fully grasp chosen hard to do topics. You truly surpassed visitors' expectations. Thank you for imparting the useful, safe, explanatory and in addition unique thoughts on your topic to Evelyn.
jordan retro 13 http://www.jordan13.us.com

I intended to draft you one bit of word to be able to thank you so much as before for your personal pleasing tips you've featured in this case. It has been certainly incredibly open-handed with people like you giving extensively just what a lot of folks might have offered as an ebook in making some cash on their own, especially seeing that you could possibly have tried it if you ever decided. The suggestions additionally worked as the great way to realize that other individuals have a similar dream just like mine to know a lot more on the subject of this matter. I'm sure there are many more fun times ahead for many who scan your blog post.
nike air max http://www.nikeairmax2019.us.com

I wanted to compose you the tiny note so as to thank you very much yet again with the pleasing tips you've documented on this page. It was simply strangely open-handed with people like you to make openly what a few people might have offered for sale for an ebook to end up making some bucks for their own end, certainly considering the fact that you might have done it if you ever considered necessary. These tricks additionally served as the great way to be certain that many people have the identical fervor similar to my own to grasp very much more in respect of this problem. I am sure there are many more pleasurable opportunities in the future for individuals that take a look at your blog.
yeezy boost 350 v2 http://youl.ink/yzyv2

Thank you a lot for giving everyone an exceptionally superb opportunity to check tips from this website. It really is so terrific and as well , stuffed with a good time for me personally and my office friends to search your blog not less than 3 times in one week to read the fresh guides you will have. Not to mention, I am at all times pleased with the astonishing secrets you give. Some 2 points on this page are unquestionably the most beneficial I have ever had.
coach factory outlet http://www.coachoutletstorefactory.com

My husband and i ended up being ecstatic when Jordan could do his homework via the precious recommendations he was given from your web pages. It is now and again perplexing just to happen to be giving out instructions which often men and women could have been making money from. And we grasp we need the blog owner to appreciate for that. All the explanations you've made, the straightforward website menu, the relationships your site make it easier to engender - it is many terrific, and it's helping our son in addition to the family recognize that the situation is fun, and that's incredibly essential. Many thanks for the whole lot!
yeezy boost 350 http://ux.nu/pfFrC

I not to mention my guys were found to be checking the great secrets from the website while all of the sudden I got a terrible feeling I had not expressed respect to the blog owner for those techniques. All the men had been absolutely thrilled to see them and have now without a doubt been taking advantage of them. Appreciation for indeed being well kind and then for using this form of extraordinary subjects most people are really desirous to discover. My personal sincere regret for not saying thanks to you sooner.
hermes belts http://www.hermesbelts.co.uk

I truly wanted to post a quick remark to appreciate you for these superb items you are giving here. My incredibly long internet look up has finally been compensated with extremely good concept to talk about with my friends and classmates. I 'd admit that many of us visitors are undoubtedly fortunate to exist in a superb place with so many wonderful professionals with interesting basics. I feel very much privileged to have used your site and look forward to so many more awesome minutes reading here. Thanks a lot once again for a lot of things.
yeezy boost http://tropaadet.dk/yzyinc

I am just commenting to make you understand what a helpful discovery my cousin's daughter had going through your web page. She learned plenty of details, not to mention how it is like to have an excellent coaching mindset to get other folks with ease learn about some problematic issues. You actually did more than her expected results. Many thanks for rendering such informative, trustworthy, revealing and even cool tips about your topic to Lizeth.
adidas nmd http://www.adidasnmds.us.com

Thanks so much for giving everyone an extraordinarily special opportunity to read critical reviews from here. It's usually very beneficial and stuffed with a lot of fun for me personally and my office mates to search your web site at least three times every week to read through the newest items you will have. And lastly, I'm just usually astounded for the magnificent inspiring ideas served by you. Some 1 tips in this article are really the best we have ever had.
russell westbrook shoes http://www.russellwestbrookshoes.us.com

I as well as my pals appeared to be following the great items located on your web page then instantly got a horrible suspicion I never thanked the website owner for those strategies. All the boys came for that reason passionate to study them and have in effect unquestionably been having fun with these things. Appreciation for getting considerably considerate and also for deciding on this sort of perfect guides millions of individuals are really desirous to understand about. My very own sincere regret for not expressing gratitude to sooner.
adidas superstar http://www.adidassuperstar.us.com

I wanted to write a small comment to thank you for all the fantastic secrets you are placing at this site. My considerable internet lookup has finally been rewarded with beneficial facts to talk about with my great friends. I 'd state that that many of us site visitors actually are rather blessed to be in a magnificent website with many awesome people with good tips and hints. I feel somewhat lucky to have used the webpage and look forward to so many more awesome moments reading here. Thanks a lot again for everything.
hermes handbags http://www.hermes-handbags.us.com

I and also my friends were examining the best information found on your web blog and unexpectedly got a horrible feeling I never expressed respect to the website owner for those secrets. Those young boys happened to be for that reason happy to read all of them and now have in reality been using those things. Many thanks for indeed being considerably kind and then for using certain wonderful topics most people are really wanting to discover. My very own sincere regret for not expressing gratitude to you sooner.
chrome hearts http://www.chromehearts.com.co

I truly wanted to compose a note in order to say thanks to you for all of the unique facts you are placing on this site. My rather long internet lookup has finally been paid with good quality know-how to write about with my great friends. I would assume that we readers are unquestionably blessed to dwell in a really good community with very many special professionals with great tips and hints. I feel rather privileged to have seen your entire webpage and look forward to plenty of more entertaining moments reading here. Thanks a lot once more for a lot of things.
[url=http://www.nhljerseysshop.us.com]nhl jerseys[/url]

I enjoy you because of all of your labor on this site. Kate takes pleasure in carrying out investigations and it is simple to grasp why. A number of us notice all relating to the dynamic mode you make useful ideas on this web blog and therefore encourage response from some others on the point then our own daughter is without question studying a lot. Take pleasure in the remaining portion of the new year. You are performing a really great job.
[url=http://www.lebron16.us]lebron 16 shoes[/url]

I wish to express my affection for your kindness giving support to men and women that absolutely need help with your matter. Your special commitment to passing the solution around has been certainly important and has in every case encouraged men and women just like me to realize their pursuits. Your personal useful guideline can mean much a person like me and even further to my office colleagues. Many thanks; from all of us.
<a href="http://zbij.net/kazou" >yeezy boost 350 v2</a>

Thank you so much for providing individuals with remarkably remarkable opportunity to check tips from here. It can be so superb and also full of amusement for me personally and my office colleagues to visit your blog at a minimum thrice in a week to read through the latest items you have. Not to mention, I'm also actually satisfied with all the very good thoughts you serve. Certain 3 areas in this article are basically the most efficient we have had.
lebron 16 http://www.lebron16.us.com

I want to point out my affection for your kindness supporting folks that require help on this important concept. Your personal commitment to getting the solution around turned out to be quite effective and have continuously permitted women much like me to attain their ambitions. Your entire informative tutorial means a whole lot to me and extremely more to my colleagues. Thanks a lot; from all of us.
cheap nfl jerseys china http://www.nfljerseys.us.org

I simply wanted to thank you so much once again. I do not know what I would have achieved in the absence of the actual ideas shown by you regarding this subject. Entirely was the hard crisis in my opinion, however , looking at your expert style you solved it made me to jump over happiness. Now i'm grateful for this support and then trust you find out what an amazing job you were undertaking educating many people thru your webpage. I am sure you've never got to know all of us.
golden goose sneakers http://www.goldengoosesneakers.us

I must express my gratitude for your kind-heartedness supporting men who require assistance with this particular issue. Your very own dedication to passing the solution all through came to be particularly beneficial and have surely permitted associates much like me to arrive at their aims. Your amazing valuable facts denotes much a person like me and much more to my mates. Thank you; from everyone of us.
red bottoms http://www.redbottom-shoes.us.com

Thanks so much for giving everyone an extremely brilliant chance to read critical reviews from this blog. It's always very excellent and stuffed with a great time for me personally and my office acquaintances to search your website the equivalent of thrice in 7 days to read through the fresh stuff you have got. And lastly, I'm also at all times fulfilled for the superb knowledge you give. Some 2 ideas in this article are clearly the very best I've had.
michael kors outlet online http://www.michael-korsoutlets.us

I enjoy you because of all your labor on this blog. Betty take interest in going through investigation and it's really easy to understand why. We know all relating to the dynamic method you render both interesting and useful tricks by means of this web site and therefore improve contribution from some other people on that area then our own girl is now being taught a lot. Enjoy the rest of the new year. You have been doing a fantastic job.
birkin bag http://www.birkinbag.us.com

I simply wanted to thank you very much once again. I'm not certain the things that I might have done in the absence of the entire methods shown by you on such a question. It has been the scary problem for me, nevertheless understanding the very specialized tactic you processed that took me to weep for contentment. I will be grateful for this advice and thus hope you are aware of a powerful job you were undertaking educating people through your blog. I'm certain you haven't got to know all of us.
nike shox for women http://www.nike-shox.us.com

I'm commenting to make you know of the extraordinary discovery my wife's child gained checking yuor web blog. She figured out numerous things, with the inclusion of what it's like to have a great giving style to make men and women very easily learn selected complicated things. You undoubtedly did more than people's expectations. Thank you for displaying these invaluable, safe, informative and in addition unique thoughts on that topic to Gloria.
moncler outlet http://www.monclersoutlet.us.com

I simply had to thank you very much once more. I'm not certain the things I would've used in the absence of the entire tactics contributed by you directly on this industry. It absolutely was an absolute frightful case in my view, however , looking at this specialized style you solved it forced me to leap with happiness. I will be happy for the assistance and as well , believe you comprehend what an amazing job that you're accomplishing teaching some other people thru your web site. I am sure you haven't met any of us.
michael kors handbags http://www.michael-kors-handbags.com.co

I wanted to compose you one tiny observation to thank you very much the moment again on your lovely suggestions you have contributed at this time. This is tremendously open-handed of you to give unreservedly all that a few people could possibly have offered for an electronic book to help make some dough on their own, chiefly seeing that you could possibly have tried it if you ever wanted. These pointers as well worked as the fantastic way to be aware that other people online have similar eagerness much like my very own to see very much more with regard to this condition. I believe there are thousands of more pleasant sessions up front for individuals that look over your website.
yeezy boost 350 http://ix.sk/AnkI2

Thanks a lot for providing individuals with an extremely nice opportunity to read in detail from here. It's usually so brilliant and as well , full of amusement for me personally and my office fellow workers to visit your site at the very least 3 times in a week to learn the newest tips you have got. And lastly, I'm so certainly satisfied for the dazzling principles you give. Certain 1 ideas on this page are without a doubt the very best I have ever had.
yeezy boost http://chilp.it/ecf0fe4

Needed to post you a little bit of note to help thank you so much again for the marvelous basics you've documented at this time. This is wonderfully open-handed with you to grant freely what most of us would have sold for an e book to generate some profit on their own, notably since you could have tried it in case you wanted. Those smart ideas in addition worked like a good way to understand that other people online have the identical fervor similar to my own to grasp a whole lot more when it comes to this issue. I know there are thousands of more pleasurable opportunities ahead for many who find out your blog post.
lacoste outlet http://www.outletlacoste.us.com

I must express my passion for your kind-heartedness in support of people that really want help with the niche. Your real dedication to getting the solution up and down appeared to be pretty invaluable and have always empowered somebody much like me to attain their targets. Your interesting tips and hints can mean much a person like me and further more to my fellow workers. Many thanks; from all of us.
cheap jordans http://www.jordansforcheap.us.com

I in addition to my buddies happened to be examining the excellent helpful tips from your web blog while at once I had a horrible suspicion I never thanked the web site owner for those strategies. The ladies are already totally joyful to learn them and now have in reality been tapping into these things. Thanks for simply being really thoughtful and then for deciding upon varieties of remarkable subjects most people are really wanting to be informed on. My personal honest apologies for not expressing gratitude to you earlier.
ysl handbags http://www.yslhandbags.net

I as well as my buddies ended up reading the best secrets from your site while instantly I got a terrible suspicion I never expressed respect to the web blog owner for those tips. Most of the ladies had been as a result glad to study them and have in effect unquestionably been making the most of those things. Appreciation for actually being quite accommodating and for using variety of superior subject areas most people are really desirous to know about. Our sincere regret for not saying thanks to sooner.
cheap jordans http://www.nikejordans.us.com

I together with my friends appeared to be reading the good procedures located on your website and so instantly I got a terrible suspicion I had not thanked the web site owner for those strategies. Those ladies are already consequently thrilled to study them and already have quite simply been loving those things. Appreciate your genuinely quite accommodating and for pick out certain cool subject matter most people are really eager to be aware of. My personal honest apologies for not expressing gratitude to earlier.
jordan 1 off white http://www.offwhitexjordan1.com

I have to express appreciation to the writer for bailing me out of this type of instance. As a result of checking throughout the online world and finding strategies that were not pleasant, I was thinking my entire life was well over. Living without the presence of answers to the problems you've solved by means of your guideline is a crucial case, as well as those which may have negatively damaged my career if I had not come across your website. Your primary mastery and kindness in maneuvering all the stuff was invaluable. I'm not sure what I would've done if I hadn't encountered such a thing like this. I can at this time look forward to my future. Thanks very much for your specialized and amazing help. I will not be reluctant to propose your web sites to any individual who requires care about this subject.
michael kors sale http://www.outletmichael-kors.us.com

I really wanted to type a brief note to appreciate you for some of the lovely secrets you are placing at this site. My particularly long internet lookup has at the end of the day been honored with good facts and techniques to share with my company. I 'd assume that most of us site visitors are truly endowed to dwell in a perfect place with many marvellous individuals with useful suggestions. I feel rather privileged to have come across your entire web site and look forward to plenty of more amazing times reading here. Thanks a lot again for all the details.
kd shoes http://www.kd11.us.com

Thanks so much for providing individuals with such a breathtaking possiblity to read from here. It is always so pleasing and also full of a great time for me and my office friends to visit your web site particularly thrice a week to read the newest guides you will have. Not to mention, I am also certainly contented concerning the powerful concepts you serve. Certain two ideas in this posting are in fact the very best we've ever had.
jordan retro http://www.jordan-retro.us.com

I and also my guys were found to be checking the nice solutions located on your web site while suddenly I got a terrible feeling I had not expressed respect to the web site owner for those tips. All the ladies had been certainly very interested to read them and have now in actuality been making the most of these things. Many thanks for simply being very helpful and for obtaining these kinds of quality areas most people are really desperate to discover. My honest apologies for not expressing gratitude to earlier.
yeezy 700 http://www.yeezy700.us.com

I simply wanted to type a simple message in order to appreciate you for these marvelous tips and hints you are sharing here. My extended internet investigation has at the end been compensated with incredibly good strategies to exchange with my family. I 'd state that that most of us site visitors actually are undeniably fortunate to dwell in a really good network with so many wonderful individuals with very helpful points. I feel extremely blessed to have seen the weblog and look forward to really more entertaining times reading here. Thanks once more for a lot of things.
yeezy boost http://www.yeezyboost-350v2.us.com

My husband and i got now lucky Peter managed to complete his inquiry while using the precious recommendations he grabbed while using the weblog. It's not at all simplistic to simply be handing out tactics which other people might have been selling. And we recognize we have got the writer to give thanks to for that. Those illustrations you have made, the straightforward blog navigation, the relationships your site make it easier to engender - it is most excellent, and it's letting our son in addition to us reckon that that matter is fun, which is certainly incredibly vital. Thanks for the whole lot!
ultra boost http://www.ultraboost.us.com

I simply wished to appreciate you all over again. I am not sure the things I could possibly have tried without the entire solutions shared by you concerning this topic. It absolutely was the distressing issue in my position, nevertheless viewing this skilled form you handled it took me to jump with gladness. I'm thankful for your advice and as well , pray you find out what an amazing job that you're undertaking teaching the rest by way of your web page. Most likely you have never got to know any of us.
adidas zx flux http://www.adidaszxflux.com

I together with my pals ended up analyzing the nice tips and tricks from the blog while the sudden came up with an awful suspicion I never thanked the web site owner for those strategies. The guys appeared to be for that reason glad to read through them and now have in actuality been enjoying them. Many thanks for indeed being well helpful and then for picking out certain extraordinary guides millions of individuals are really desperate to discover. My sincere apologies for not expressing gratitude to you earlier.
kyrie 3 shoes http://www.kyrie3.us.com

My spouse and i have been so peaceful when Ervin could finish off his web research from the ideas he received through the web site. It's not at all simplistic to simply always be offering secrets that people have been making money from. Therefore we figure out we have got you to thank because of that. The type of explanations you've made, the straightforward blog menu, the friendships you will help engender - it is many amazing, and it is leading our son and the family feel that this article is awesome, and that's particularly pressing. Thanks for the whole lot!
golden goose sneakers http://www.goldengoose-sneakers.us

Thank you for all your valuable labor on this site. My mom loves participating in investigation and it's obvious why. I notice all about the dynamic method you render useful strategies via this blog and even invigorate contribution from visitors on the theme plus our own child is without question being taught a lot. Have fun with the remaining portion of the new year. You have been doing a first class job.
michael kors outlet http://www.michael-kors-handbags.org.uk

I'm just writing to make you be aware of of the really good experience my child developed going through your blog. She even learned plenty of issues, with the inclusion of what it is like to have a wonderful helping spirit to have other individuals just fully understand a variety of extremely tough things. You truly surpassed our own desires. Thanks for distributing the necessary, trustworthy, explanatory not to mention unique tips on this topic to Jane.
fila disruptor http://www.fila-shoes.us.com

Seiten

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

Aus der Kategorie

Tipps & Tricks