jquery.autobox
v3.1.0
Published
Resize the textarea (vertically or horizontally) automatically to fit the contents
Downloads
552
Maintainers
Readme
Autogrow <textarea>
while typing
Resize the <textarea>
(vertically or horizontally) automatically to fit the contents.
Getting Started
Download the production version or the development version or use unpkg version directly in your HTML.
In your web page:
<script src="jquery.js"></script>
<!-- Include local copy of the lib -->
<script src="dist/jquery.autobox.min.js"></script>
<!-- or CDN version -->
<script src="//unpkg.com/jquery.autobox"></script>
<script>
jQuery(function($) {
// Bind autobox events to all TEXTAREAs in `.myView` and it's descendants, animation speed 200ms and delay before restoring size 400ms
$('.myView').autoboxBind({ speed: 200, delay: 400 });
// Bind autobox events to `document`, listening on `textarea.autobox` elements.
$(document).autoboxOn('textarea.autobox');
// Bind autobox events to `document`, listening on `textarea.autobox` elements, with horizontal autogrow.
$(document).autoboxOn('textarea.autoboxh', { resize: 'horizontal' });
// Bind autobox events to `document`, listening on `textarea.autobox` elements, don't shrink after blur.
$(document).autoboxOn('textarea.autoboxp', { permanent: true });
// Adjust once Height of all TEXTAREAs in `.myView` and it's descendants.
$('.myView').autobox({ resize: 'vertical' });
// Adjust once Height and/or Width of all TEXTAREAs in `.myView` and it's descendants.
$('.myView').autobox();
});
</script>
If you are using a build system:
import jQuery from 'jquery'; // we need jQuery
import autobox from 'jquery.autobox'; // import the init function of the plugin
autobox(jQuery); // init the plugin on this copy of jQuery
Documentation
This plugin exports three jQuery methods:
- $(sel).autobox(options) - Adjust Height/Width of all TEXTAREAs in
this
and it's descendants - $(sel).autoboxOn(sel, options) - Bind Auto Height/Width Adjustment events to matched element, listening on
sel
elements - $(sel).autoboxBind(options) - Bind Auto Height/Width Adjustment events to all TEXTAREAs in
this
and it's descendants - $.autobox(elements, options) - same as
$(elements).autobox(options)
Options:
- permanent: bool - if false (default), the textarea would restore its size on blur
- resize: "" | "vertical" | "horizontal" - resize mode, leave empty for auto-detection
- speed: number - restore height animation speed (default 0 - no animation)
- delay: number - delay before restoring textarea height on blur (default 250 milliseconds)
Examples
<table class="autobox">
<tr><td>Text field #1</td><td><textarea resize="vertical">Some very important contents</textarea></td></tr>
<tr><td>Text field #2</td><td><textarea resize="horizontal">Ulgy resize, but may be useful sometimes</textarea></td></tr>
<tr><td>Text field #3</td><td><textarea style="resize:vertical">CSS resize works too</textarea></td></tr>
</table>
<script>
$('body').autoboxOn('.autobox', { permanent: false, resize: '' }); // All textareas inside .autobox elements would be autoboxed
</script>
Live example on DUzun.Me.
Release History
v3.0.0
In AMD, CommonJs and ES6 modules jquery.autobox
exports the init function only
and doesn't initialize automatically.
See Getting Started above.