Texpand is a Prototype-based textarea auto-expander (i.e. the textarea will expand in height as you type).
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
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.
It’s actually that easy. You can apply any kind of styles you want – everything will be taken care of.
Texpand takes a number of options that you can use to modify its behavior:
|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.|
|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:
View the demo. See the examples/ directory for demo source.
To see Texpand in production, check out GigPark.
Contributions by Tim Fluehr
Thanks to GigPark for allowing me to release this!