Making textareas more usable

You've built a form. It needed textarea. Your form looks ugly with a huge textarea, but the content to be entered requires the user to see more than a handful of lines at a time. What to do?

How about: only make it BIG when they're editting it.

Here's a really quick example:

It's fairly obvious that a textarea for a news story is not going to do well if it only shows about seven lines of text and only consumes a small portion of the horizontal. Enter the focus trick. In following example, entering the textarea causes it to expand. Leaving the textarea makes it shrink again.

In good browsers, this effect is easily achieved:

textarea.expandable:focus {
	display: block;
	margin: 0 auto;
	clear: left;
	
	width: 90%;
	height: 15em;
}

Of couse, IE doesn't understand the :focus pseudo-class. So for IE, the problem gets a bit trickier. We need to add a tiny bit of javascript:

/* function to run on focus */
function textareaExpand(e) {
	var target = e.srcElement
	target.className = target.className.replace('expandable', 'expandable-focused');
}
/* function to run on blur (unfocus) */
function textareaCollapse(e) {
	var target = e.srcElement
	target.className = target.className.replace('expandable-focused', 'expandable');
}
// apply this javascript ONLY for IE
function textareaSetup(e) {
	var tas = document.getElementsByTagName('textarea');
	for (var i = 0, taLen = tas.length; i < taLen; i++)
		if (tas[i].className.indexOf('expandable') >=0) {
			tas[i].attachEvent('onfocus',textareaExpand);
			tas[i].attachEvent('onblur',textareaCollapse);
		}
}

if (document.all)
	window.attachEvent('onload', textareaSetup);

The only thing left to do after that is to fix our CSS selector:

textarea.expandable:focus, textarea.expandable-focused {
	display: block;
	margin: 0 auto;
	clear: left;
	
	width: 90%;
	height: 15em;
}