Texpand

Texpand is a Prototype-based textarea auto-expander (i.e. the textarea will expand in height as you type).

Compatibility

Texpand has been tested and is known to work in the following browsers:

• Safari 4
• Firefox 3
• Firefox 2
• Opera 9.64
• Internet Explorer 8
• Internet Explorer 7
• Internet Explorer 6

Usage

HTML/JS

Texpand is ridiculously simple to use, simply instantiate a new Texpand with either an id of a textarea or the actual textarea and BAM you’re done.

<script type="text/javascript">
  document.observe("dom:loaded", function(){
    new Texpand('bio');
  });
</script>
...
<form action="#" method="post">
  <textarea id="bio" name="bio" rows="3" cols="5"></textarea>
</form>

It’s actually that easy. You can apply any kind of styles you want – everything will be taken care of.

Options

Texpand takes a number of options that you can use to modify its behavior:

Option	Default	Description
autoShrink	false	Determines whether the textarea should shrink in size if text is removed.
expandOnFocus	false	When this is true it will expand the textarea to fit the current content when the textarea receives focus.
expandOnLoad	false	When this is true it will expand the textarea to fit the default content when instantiated.
increment	15	The increment can be thought of as the amount of buffer space at the bottom of the textarea. It is expressed as an integer, but it is a pixel value.
shrinkOnBlur	false	When this is true it will shrink the textarea to it’s initial size the textarea loses focus.
tabSize	4	Any tab characters that are found in the textarea element will be replaced with tabSize spaces.

Callbacks

Callback	Description
onExpand	This is a callback that gets executed after the textarea expands/shrinks. It receives the keyup event as its only parameter.

This is how one would provide options and callbacks to Texpand:

var t = new Texpand('bio', {
  autoShrink: true,
  expandOnFocus: true,
  shrinkOnBlur: true,
  onExpand: function(event) {
    // Some fancy pants javascript
  }
});

Examples

View the demo. See the examples/ directory for demo source.

To see Texpand in production, check out GigPark.

Authors

Written by Gianni Chiappetta – gf3.ca

Contributions by Rob Sterner – robsterner.com

Contributions by Michael Harris – harrisdev.net

Contributions by Tim Fluehr

Credits

Thanks to GigPark for allowing me to release this!