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").expandingTextarea();
</script>
See the project page for an explanation of how it works.

Highlights

What makes this plugin cool?

Examples

Almost all customization of the expandingTextareas 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 and the .textareaClone, like so:


textarea, .textareaClone {
    min-height: 6em;
}

Maximum Height

Set a max-height on the textarea to get scrolling after a certain size. This is done just like the min height example above:


textarea, .textareaClone {
    max-height: 8em;
}

Static Width

Just set a static width on the textarea, and the pre tag will snap to fit it!


textarea, .textareaClone {
    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 both elements, like so:


textarea, .textareaClone {
    padding: 1em;
    margin: 1em;
    width: 50%;
}

Centering

Centering the textarea is actually pretty easy, just set a width and a margin: 0 auto; on the container. Make sure your textarea has 100% width with border-box sizing too!


.expandingText {
    width: 75%;
    margin: 0 auto;
}

textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

Destroying

Allows for removing the expanding functionality.

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

Callbacks

resize

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").expandingTextarea({
        resize: callback
    });
</script>

Current Height: