Stretchy: Form element autosizing, the way it should be

As you might be aware, these days a good chunk of my time is spent working on research, at MIT. Although it’s still too early to talk about my research project, I can say that it’s related to the Web and it will be open source, both of which are pretty…


This content originally appeared on Lea Verou’s blog and was authored by Lea Verou

Screen Shot 2015-07-25 at 18.40.13As you might be aware, these days a good chunk of my time is spent working on research, at MIT. Although it’s still too early to talk about my research project, I can say that it’s related to the Web and it will be open source, both of which are pretty awesome (getting paid to work on cool open source stuff is the dream, right?).

The one thing I can mention about my project is that it involves a lot of editing of Web content. And since contentEditable is a mess, as you all know, I decided to use form controls styled like the content being edited. This meant that I needed a good script for form control autosizing, one that worked on multiple types of form controls (inputs, textareas, even select menus). In addition, I needed the script to smoothly work for newly added controls, without me having to couple the rest of my code with it and call API methods or fire custom events every time new controls were added anywhere. A quick look at the existing options quickly made it obvious that I had to write my own.

After writing it, I realized this could be released entirely separately as it was a standalone utility. So Stretchy was born :) I made a quick page for it, fixed a few cross-browser bugs that needed fixing anyway, put it up on Github and here it is!

Enjoy!

PS: You can also use it as a bookmarklet, to autosize form controls on an existing page, if a form is bothering you with its poor usability. You will find it in the footer.


This content originally appeared on Lea Verou’s blog and was authored by Lea Verou


Print Share Comment Cite Upload Translate Updates
APA

Lea Verou | Sciencx (2015-07-26T00:00:00+00:00) Stretchy: Form element autosizing, the way it should be. Retrieved from https://www.scien.cx/2015/07/26/stretchy-form-element-autosizing-the-way-it-should-be/

MLA
" » Stretchy: Form element autosizing, the way it should be." Lea Verou | Sciencx - Sunday July 26, 2015, https://www.scien.cx/2015/07/26/stretchy-form-element-autosizing-the-way-it-should-be/
HARVARD
Lea Verou | Sciencx Sunday July 26, 2015 » Stretchy: Form element autosizing, the way it should be., viewed ,<https://www.scien.cx/2015/07/26/stretchy-form-element-autosizing-the-way-it-should-be/>
VANCOUVER
Lea Verou | Sciencx - » Stretchy: Form element autosizing, the way it should be. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/07/26/stretchy-form-element-autosizing-the-way-it-should-be/
CHICAGO
" » Stretchy: Form element autosizing, the way it should be." Lea Verou | Sciencx - Accessed . https://www.scien.cx/2015/07/26/stretchy-form-element-autosizing-the-way-it-should-be/
IEEE
" » Stretchy: Form element autosizing, the way it should be." Lea Verou | Sciencx [Online]. Available: https://www.scien.cx/2015/07/26/stretchy-form-element-autosizing-the-way-it-should-be/. [Accessed: ]
rf:citation
» Stretchy: Form element autosizing, the way it should be | Lea Verou | Sciencx | https://www.scien.cx/2015/07/26/stretchy-form-element-autosizing-the-way-it-should-be/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.