A simple jQuery plugin

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 & install How can I integrate this to my website?


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.


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

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

Then, add on your js file:


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

Usage How can I use this awesome script?

Example of use

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

    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 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.

Demo Try it yourself!

With defaults options



    animate: {
        enabled: true,
        duration: 'fast'

Constrained height

    minHeight: '90px',
    maxHeight: '256px'