This time I will share jQuery Plugin and tutorial about Auto Grow Textarea While Typing – jQuery Autobox, hope it will help you in programming stack.
Autobox is a lightweight jQuery textarea resize plugin which automatically adjusts the height and width of the regular textarea element to match its content while typing.
How to use it:
1. Install the Autobox with NPM:
2 |
$ npm install jquery.autobox --save |
2. Import jQuery and the Autobox module.
1 |
import jQuery from 'jquery' ; |
2 |
import autobox from 'jquery.autobox' ; |
3. Or directly include jQuery library and the Autobox plugin’s script on the html page.
2 |
integrity = "sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin = "anonymous" > |
5 |
< script src = "dist/jquery.autobox.js" ></ script > |
4. Activate the auto grow functionality on your textarea elements. You can also specify the direction of the auto resizing.
1 |
< div class = "container" > |
2 |
< textarea resize = "vertical" ></ textarea > |
3 |
< textarea resize = "horizontal" ></ textarea > |
1 |
$( '.container' ).autoboxBind(); |
5. Or on a specific textarea element.
1 |
<div class= "container" > |
2 |
<textarea class= "demo" ></textarea> |
1 |
$(document).autoboxOn( 'textarea.demo' ); |
Changelog:
2018-10-29
- Added ‘resize’ option to override CSS resize
This awesome jQuery plugin is developed by duzun. For more Advanced Usages, please check the demo page or visit the official website.