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.
Heads Up!
The Autosize plugin extends jQuery's val() function to
fire an event: input
. This allows the developer to bind to and handle the event when setting the content
programatically.
Examples
Heads Up!
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>
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");