Javascript expanding textareas
Hey ho,
All over the web i’m seeing sites such as facebook with textareas that vertically expand automagically (and from what I hear FF3 has this functionality built in) but until everyone starts using Firefox i’v written a handy javascript function that will simulate the effect in other browsers.
The problem with all the others examples i’ve seen round the net are that they all require you to use some sort of CSS bodgery or require jQuery or Prototype. With my lil sript theres no need for any of that nonsense and you can basically throw anything you like at it… or use your own styles in a stylesheet or inline.
I’ve tried to make it as easy as possible, all you need to do is add “autoExpand” to the textareas class and my script will do its magic, it can also works with ajax calls by calling autoExpand(object) after your ajax call returns.
The javascript file is available below and there is a DEMO you can have a looksy at.
It’s been tested on IE7, FF2, Safari 3 and Opera 9 and works more or less as intended, it doesn’t work on IE6 at the moment, but when i get access to IE6 i’ll be sure to fix it
Download: autoexpand.js
Love you!
Tags: auto expand, code, expand, facebook, html, ie6, ie7, internet explorer, javascript, textarea, textareas, vertical

July 15th, 2008 at 10:08 pm
thanks so much for this simple solution, i love it when people just give me a class to apply, and i don’t have to think, when i’ve got other stuff to worry about!
July 15th, 2008 at 10:18 pm
just a thought, when i change the default number of columns, the resize seems to be initiated at a different point in the current line i’m typing. so in one line it will resize after i type 20 characters, and the next line may initiate after 22 characters