Textarea auto-expander.
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



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.

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

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:

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.


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


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

To see Texpand in production, check out GigPark.


Written by Gianni Chiappettagf3.ca

Contributions by Rob Sternerrobsterner.com

Contributions by Michael Harrisharrisdev.net

Contributions by Tim Fluehr


Thanks to GigPark for allowing me to release this!