What's that?

This plugin is a really simple plugin which automatically resize the focused textarea on-the-fly, based on the contents height.
Just like Facebook, if you want.

There are a few options to adapt this plugin to yours needs. You can:

• add animation while resizing;
• set a maximum or minimum height.

How it work?

The principle is really simple. Rather than bother to calculate the size of the textarea, we let the browser do it. When the textarea's content is modified, we put it on an hidden div who have the same CSS properties as the textarea.
Then, we get the height of this div, and we apply it to the textarea.

Download

You can download the (very small) script by following this link:

Download jquery.textareaAutoResize.js
File size: 4 Ko

Current version is 1.1.

This script is licensed under a GNU LGPL v3 license.

Install

To install the script, just include it on your HTML page.

<script src="js/jquery.textareaAutoResize.js"></script>

Then, add on your js file:

$('textarea').autoResize();

This will enable the script for all textareas, using the default options (no animations and unlimited height).

Example of use

This is a typical example of use of this script, will all options.

$('textarea').autoResize({
    animate: {
        enabled:  true,
        duration: 'fast',
        complete: function() {
            // Do something
        },
        step: function(now, fx) {
            // Do something else
        }
    },
    maxHeight: '500px'
});

All options

All available options are presented below.

Option	Description
animate.enabled	This will add animation while resizing the textarea. The default value is false. Heads up! This option is affected by the jQuery.fx.off property.
animate.duration	This option sets the duration of the animation. Possibles values are "slow", "normal", "fast" or a numeric value in ms. The default value is 100.
animate.complete	This option sets a function to call once the animation is complete. The default value is null (no callback).
animation.step	This option sets a function to be called after each step of the animation. It accepts two arguments: now and fx. now: the numeric value of the property being animated at each step; fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated. The default value is null (no callback). Heads up! You can find more informations by visiting the jQuery.animate() documentation page.
minHeight	This option sets a minimal height for the textarea. If this option is enabled, the textarea will be resized only if his height is higher than this minimal height. Yes, it's logic.
maxHeight	This option sets a maximal height for the textarea. If this option is enabled, the textarea will be resized only if his height is lesser than this maximal height. Yes, it's logic too.

With defaults options

$('textarea').autoResize();

Animation

$('textarea').autoResize({
    animate: {
        enabled: true,
        duration: 'fast'
    }
});

Constrained height

$('textarea').autoResize({
    minHeight: '90px',
    maxHeight: '256px'
});