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

Standard

Extra Data-Attributes

Extra data-attributes configured to allow removal of problematic classes or attributes that could affect the cloned element used for calculating size.

If running the plugin without using the markup API, add the class .autosize to the plugin to get the desired style behaviour.

Markup

<!-- Standard markup -->
<textarea id="textarea1" name="textarea1" data-autosize ></textarea >
<!-- Additional remove attributes/classes markup (space separated values) -->
<textarea id="textarea2" name="textarea2" data-autosize data-autosize-remove-attributes="data-val-message" data-autosize-remove-classes="validate error" ></textarea >

Methods

The autosize exposes the following method signatures.

.autosize(options)

Initialises the plugin with an optional options object

options

Contains parameters to pass to the plugin.

removeAttributes: A space separated list of attributes to remove from the cloned textarea
removeClasses: A space separated list of CSS classes to remove from the cloned textarea

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

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 override this behaviour the following code will allow you to do so.

// Override the default behaviour
$(document).off("ready.r.autosize domchanged.r.autosize")
           .on("ready.r.autosize domchanged.r.autosize", function () {
    // Your custom behaviour...
}); 

// 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...
});