Stretchy: Form element autosizing, the way it should be

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.

  • MaxArt

    It says “Fork me on GitHub”, but it’s not there though?

    I made something like that once. The real problem for me was supporting older browsers. Oh, the lack of some features. Oh, the inconsistencies…

    • Fixed now, I had forgotten to make the repo public, sorry!

      The good thing about research is that older browsers don’t matter much and this was made as a helper for my research project.
      Hopefully it can be useful to some without ancient browser support.

  • Jana

    Dear Lea, what’s the licence? MIT? It would help a project I am at right now.

    • MIT as always 🙂
      It says so in the comment in the beginning of the file, but a PR to add a LICENSE file is welcome 🙂

  • KHS

    Nifty little tool. Thanks Lea!

  • I get it. You’ve got a hot head and you’re always thinking of solutions and tools but what I don’t get is how you get the inspiration for your plugin page designs. Do you just tweak existing templates? I know how long it takes me to get an inspiration for a design

    • No, I design them from scratch, but, not all of them are good. Try not being able to design anything any more except for these project page designs, and the inspiration will come to you 😛
      Here I thought of the cat immediately with the name stretchy, then decided I wanted to use a desaturated turquoise as an accent color, the rest of the vintage design just sort of happened as I was experimenting.

  • Awesome!!

  • Handrei Stoicescu

    There seems to be a problem with IE11 in regard to the “Input with placeholder” and the “Input with initial value”. I also tried to emulate IE9 from the console, and I get the same result. I’m talking about the “Examples” section. Puzzled here because it’s advertised to work with IE9.
    Nice work, BTW, and keep on keepin’ on.

  • Erin McGrath

    “And since contentEditable is a mess, as you all know,…”

    this is a pretty basic question. I don’t know. Have you written about the problems with contentEditable? My Google skills must not be working today. Thanks!

  • Awesome! 😀

  • yada

    It would be nice if the textarea wouldn’t resize if the user increases the size manually (by pulling the thingy in the bottom-right). Other than that it looks nice.

  • smith

    Stretchy: Form element autosizing, the way it should be is a useful article by cara menghilangkan bau busuk pada kolam lele , jas hujan yogya and jual crystal x di sleman