Autosize

A jQuery plugin that provides automatic vertical resize functionality to textareas. Useful for ensuring that textareas do not clutter the page. Uses CSS transitions to perform the animation.

Comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.

Examples

Markup

<!-- Standard markup -->
<textarea id="textarea1" name="textarea1" data-autosize></textarea>

Methods

The autosize exposes the following method signatures.

.autosize()
Initialises the plugin.
.autosize("size")
Triggers the plugin to resize to match its text.

Events

The autosize plugin exposes the following events allowing the developer to tap into its behaviour.

size.r.autosize
This event is fired immediately when the plugins size instance method is invoked.
sized.r.autosize
This event is fired when the plugins sized instance method is invoked once the textarea has completed the animation and is resized.

Binding to these events is as follows:

// Bind to the size event.
$("YOUR_SELECTOR").on("size.r.autosize", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the sized event.
$("YOUR_SELECTOR").on("sized.r.autosize", function(event) {
    // Your custom behaviour...
});

Data API

The autosize's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to disable this behaviour the following code will allow you to do so. 

// Disable the default loading behaviour
$(document).off(".r.autosize.data-api");