https://github.com/duzun/jquery.autobox
Autogrow <textarea> (vertically or horizontally) to fit the contents automatically
https://github.com/duzun/jquery.autobox
Last synced: 5 months ago
JSON representation
Autogrow <textarea> (vertically or horizontally) to fit the contents automatically
- Host: GitHub
- URL: https://github.com/duzun/jquery.autobox
- Owner: duzun
- License: mit
- Created: 2014-12-13T02:24:50.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T02:19:24.000Z (almost 3 years ago)
- Last Synced: 2024-12-06T13:07:23.129Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 768 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# Autogrow `` while typing
Resize the `` (vertically or horizontally) automatically to fit the contents.
[](https://david-dm.org/duzun/jquery.autobox#info=devDependencies&view=table)
## Getting Started
Download the [production version][min] or the [development version][max]
or use [unpkg version][unpkg] directly in your HTML.
[min]: https://raw.github.com/duzun/jquery.autobox/master/dist/jquery.autobox.min.js
[max]: https://raw.github.com/duzun/jquery.autobox/master/dist/jquery.autobox.js
[unpkg]: https://unpkg.com/jquery.autobox
In your web page:
```html
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();
});
```
If you are using a build system:
```js
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
```html
Text field #1Some very important contents
Text field #2Ulgy resize, but may be useful sometimes
Text field #3CSS resize works too
$('body').autoboxOn('.autobox', { permanent: false, resize: '' }); // All textareas inside .autobox elements would be autoboxed
```
Live example on [DUzun.Me](https://duzun.me/playground/encode#base64UrlEncode=).
## 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.