Javascript expanding textareas

April 12th, 2008
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: javascript   textarea   expanding   Code  

Comments

bobby

July 15th, 2008 10:08pm
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!

andy

July 15th, 2008 10:18pm
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

Scrivna

July 29th, 2008 2:13pm
Andy: the box should only expand when you start a new line, can you provide a few more details please?

Leave a reply:

(required)
(Will not be displayed) (required)
.
© Ross Scrivener 2008 | Contact