Standard Example

Extra Data-Attributes Example

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.

The 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 plugin 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.autosize.responsive: This event is fired immediately when the plugins size instance method is invoked.
sized.autosize.responsive: 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 plugin 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.autosize.responsive")
           .on("ready.autosize.responsive", function () {
               // Your custom behaviour...
           }); 
// Override the default textarea control cut/paste/keyup behaviour
$(document.body).off("keyup.autosize.responsive paste.autosize.responsive cut.autosize.responsive")
                .on("keyup.autosize.responsive paste.autosize.responsive cut.autosize.responsive", "textarea[data-autosize]", function (event) {
                    // Your custom behaviour...
                }); 
// Override the default window resize behaviour
$(window).off("resize.autosize.responsive")
         .on("resize.autosize.responsive", function () {
             // Your custom behaviour...
         }); 
// Bind to the size event.
$("YOUR_SELECTOR").on("size.autosize.responsive", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the sized event.
$("YOUR_SELECTOR").on("sized.autosize.responsive", function(event) {
    // Your custom behaviour...
});