Textarea auto-expander.
JavaScript
Pull request Compare This branch is 1 commit ahead, 4 commits behind gf3:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
lib
vendor
.gitignore
LICENSE
README.textile
Rakefile

README.textile

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 ChiappettaRunlevel6

Contributions by Rob Sternerrobsterner.com

Contributions by Michael Harrisharrisdev.net

Contributions by Tim Fluehr

Credits

Thanks to GigPark for allowing me to release this!