SiteCrafting Blah Blah Blog
Mar. 12, 2007 at 10:27am
Cleaner forms through collapsible textareas
More form, less space
Some really large forms can be a bit of an eyesore especially to the people filling them out. One thing that always bothered me was how bulbous most textareas had to be just to make enough room for a user to feel they could type what they needed. So I set out to figure a good way to clean up my forms a bit while still allowing the multi-line input of textareas.
I'm not much for surprises so here's the final working example. The idea is to make any textarea on a page look just like a normal text input field. Once a user puts their cursor inside it expands to let them know they can type more than just a line.
First you should determine how tall you want the textarea when it's collapsed and when it's expanded. I recommend matching the collapsed height to any other text input fields in your form. Next add a class to the form(s) you'd like to convert to use collapsable textareas. With that, some CSS and a couple JS functions, we're there!
You didn't think I'd leave you hanging, did you? Here's some code:
/* first some CSS */
.collapse_tareas input, .collapse_tareas textarea { font: 10pt arial, sans-serif; border: 1px solid #888; }
.collapse_tareas textarea { height: 1.45em; }
.collapse_tareas textarea.compact { height: 1.45em !important; }
.collapse_tareas textarea.expanded { height: 5em !important; }
Next comes the JavaScript:
// find all the forms with textareas we want
// to allow to collapse
function setupTextareas() {
var pageForms = document.getElementsByTagName("form");
for( var j=0; j<pageForms.length; j++) {
var formArea = pageForms[j];
if( formArea.className.indexOf("collapse_tareas") > -1 ) {
var txtAreas = formArea.getElementsByTagName("textarea");
for( var i=0; i<txtAreas.length; i++ ) {
var thisTxtArea = txtAreas[i];
if( thisTxtArea.addEventListener ) {
thisTxtArea.addEventListener("focus", bigSmlTextarea, false);
thisTxtArea.addEventListener("blur", bigSmlTextarea, false);
} else { // IE
thisTxtArea.attachEvent("onfocus", bigSmlTextarea);
thisTxtArea.attachEvent("onblur", bigSmlTextarea);
}
}
}
}
}
// collapse or expand a textarea
function bigSmlTextarea(e)
{
var node = ( e.target ? e.target : e.srcElement );
if( node.className.indexOf("expanded") == -1 )
node.className += " expanded";
else
node.className = node.className.replace(/expanded/gi, "");
}
// prep the the desired textareas to
// collapse and expand
window.onload = setupTextareas;
By including the above CSS and JS on a page, any form with the "collapse_tareas" class will convert any textareas to collapsible ones. View the example and enjoy! It's an easy way to help clean up those unsightly forms.
Posted in Coding Techniques, CSS, XHTML by Kevin Freitas
Comments (3)
Scott says:
Just wanted to note a slight irony that your excellent post about collapsible text fields was followed by a conventional text field for comments about your post. Wouldn't that comment box be a great place for an expanding field in case I wanted to write a really, really, really long comment?
1 | Mar. 13, 2007 at 2:39pm
Kevin says:
Ack, you got me Scott. Actually, I think the collapsible textarea method above is best for really large forms. The one I first implemented this is one of those where each row has low, medium, and high rating radio buttons followed by comment field. The radio buttons are nice and compact while a comment would push things far apart. With this, the row heights on the form are nice 'n tidy and let them emote when the want to.
2 | Mar. 13, 2007 at 3:08pm
Ken says:
Ok, I'm sold. Your collapsible textarea is a good idea. I've had some humongous forms that I didn't want to split into multiple pages.
3 | Mar. 16, 2007 at 9:00am