Autosizing Textarea (using Prototype)

Recently, I have been doing a lot of Model-View-Controller work in ASP.NET which has caused me to have to use some more “old school” style HTML controls, instead of the .Net Server-side Controls I am so used to.  I came along an interesting problem where I needed a text area which automatically changed it’s height to fit all the text in without a horizontal scroll bar, much like Facebook does with it’s wall.

I also wanted the Javascript to use the Javascript library for the event listening so I didn’t need to worry about the event handler quirks of the various browsers (and becasue that’s what I know).  I post the solution that worked for me in the interest of creative commons.




If you have a textarea, with the wrap=”off” attribute set, then its even easier. Just replace the script tage above with this one: