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 carousel'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")
.on("ready.r.autosize", function () {
// Your custom behaviour...
});
// Override the default textarea control cut/paste/keyup behaviour
$(document.body).off("keyup.r.autosize paste.r.autosize cut.r.autosize")
.on("keyup.r.autosize paste.r.autosize cut.r.autosize", "textarea[data-autosize]", function (event) {
// Your custom behaviour...
});
// Override the default window resize behaviour
$(window).off("resize.r.autosize")
.on("resize.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...
});