Tuesday, April 21, 2009

Simple JavaScript expanding text input

Today my colleague had a requirement for a simple expanding text input on a website form. By expanding I don't mean that it gets bigger as you type, just that when you click/focus into the text input it appears to grow giving you a larger multi-line textarea in which to post a comment. Unfortunately I couldn't whip out jQuery (which is my new favourity JS library after using Prototype for some time) because we just needed this one bit of DHTML.

Requirements

  • When user clicks/focuses on the input show a larger textarea.
  • The textarea must appear above the other form elements but leave some of the submit button showing.

The Demo

Click in the input to see it grow.

The Code



<style type="text/css">

/**
 * Styles for the expanding / contracting input
 */

#smallInput {
 height: 30px;
 width: 250px;
 overflow: hidden;

}
#largeInput {
 display: none;
 height: 80px;
 width: 350px;
 overflow-x: hidden;
 overflow-y: auto;
 word-wrap: break-word;
 z-index: 1000;
}

</style>


2 comments:

Simone said...

thanks, very very useful for me!

Anonymous said...

Nice solution. What if you have more than one instance on a single page? I am not keen enough on javascript to tweak it to work on my own without duplicating the entire thing for each instance.