Fork me on GitHub

Expanding Textareas jQuery Plugin

Usage

Easy Way

<script src='expanding.js></script>
<textarea class='expanding'></textarea>
No extra JavaScript calls needed if you already have the 'expanding' class on the textarea.

Manual Initialization

If you'd like to manually call the plugin instead, use:
<script>
    $("#element").expanding();
</script>
See the project page for an explanation of how it works.

Highlights

What makes this plugin cool?

Examples

Almost all customization of the expanding plugin is simply done in CSS. Here are some of the things you can do:

Minimum Height

Sometimes you may want to start off with a couple of lines to make it obvious that there is a textarea. This is easy - just use CSS to add a min height to the textarea, like so:


textarea {
    min-height: 6em;
}

Maximum Height

Set a max-height on the textarea to get scrolling after a certain size. This is done by applying a max height declaration to the textarea:


textarea {
    max-height: 8em;
}
or

<textarea style="max-height:200px">Text</textarea>

Static Width

Just set a static width on the wrapper:


.expanding-wrapper {
    width: 400px;
}

Custom font properties

All fonts, colors, and spacings can be set to whatever you want, and the plugin will automatically copy the styles over to the invisible pre tag.

Custom borders

Custom border sizes on the textarea are handled as well

Proportional paddings, margins, and widths

Percentages are a little tricky. Firefox seems to have some problems rendering percentage paddings and margins on textareas, it is probably best if you avoid this technique. Using ems for margin and padding seems to work fine. You can use percentages on widths in all browsers, as you place the CSS rule on the wrapper, like so:


.expanding-wrapper {
    width: 50%;
}
textarea {
    padding: 1em;
    margin: 1em;
}

Centering

Centering the textarea is actually pretty easy, just set a width and a margin: 0 auto; on the wrapper.


.expanding-wrapper {
    width: 75%;
    margin: 0 auto;
}

Destroying

Allows for removing the expanding functionality.

<script>
    $("#element").expanding('destroy');
</script>

Rows

The plugin respects the rows attribute, adjusting the clone's min height accordingly:

Callbacks

update

Sometimes other parts of your application need to be notified when a textarea changes its height (e.g., to move out of its way!). You can dispatch such notifications through callback functions passed in when you first initialize the plug-in, like so:

<script>
    $("#element").expanding({
        update: callback
    });
</script>

Current Height:

Word Wrap

wrap=off

If the textarea has the wrap attribute set to 'off', then it will allow this behavior to work, even while still expanding on height changes.


<textarea wrap="off"></textarea>
<script>
    $("#element").expanding();
</script>