Automatically expanding HTML textarea.

Intro

It's very likely that no self-respecting JavaScript coder can pass an opportunity to write a templating system that converts some JSON object into a tree of DOM elements. I am not a JavaScript coder, but the idea just sounded fun and useful for grasping the deeper understanding of browser DOM element creating fundamentals.

Found quite a few very good sources of tips for the templating / DOM-creating endeavors, but will note those in a later post. Today, we go more fundamental than that - HTML's textarea element.

I gave up caring about which data elements are single-line and which could go multi-line on me at any moment, and are just preparing for multi-line-capable UI from the get go.

What every self-respecting multi-line-text-entry-capable UI needs is an auto-resizing textarea object.

The Goods

There are many many implementations of various levels of readiness, but the most robust ones appear to be the ones using a hidden div for calculation of area occupied by text. Some of you may think "What's the bid deal? Count the number of carriage returns..." and you would miss the biggest point of modern textarea - ability to wrap long strings.

Long story short, if you are on jQuery wagon, seriously consider jQuery-Elastic.

It's MIT-licensed - same as jQuery, and is mature.

It works well with proportional layout. I like sizing the wrapping div and have input elements at "width:100%". jQuery-Elastic handled that just fine.

There are no funky CSS settings / files needed. The CSS arguments that Elastic clones from the textarea into the off-screen div are a perfect set to withstand even browser-based scaling. (Scaling worked perfectly in FF. IE and Chrome caused the height estimate to overshoot just a tad and the textarea was growing some 25%-60% of an extra line of hanging empty space on the bottom.

If you take away the dressing, it's about 20 lines of cross-browser-compatible (IE8, Chrome 3.x, FireFox 3.x) code that does the job rather well.

The call-back is tied to keyup event and enabling the chosen textarea elements for "elasticity" is as easy as:

$('.elastictextclass').elastic();

I did have to make some alterations to the stock plug in:

- For compatibility reasons, the default code keeps a hanging empty line below the text. I removed the line. Now, textarea looks like input type=text asdf - very nice for inclusion into long forms.

- Added hookups into existing keyup processing code to handle "exiting" from textarea through CTRL+ENTER.

Adding alterations was easy - another sign of quality of the code.

jQuery-Elastic - highly recommend.