Auto Expand Textarea When Exceeding Character Limit - jQuery textpandable.js
| File Size: | 4.22 KB |
|---|---|
| Views Total: | 424 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
An easy and configurable jQuery expanding textarea plugin that automatically inserts a new row to the textarea when its content exceeds a certain number of characters.
How to use it:
1. Insert the JavaScript textpandable.js after loading the latest jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/textpandable.js"></script>
2. Initialize the plugin on the target textarea element and done.
<textarea></textarea>
$(function(){
$('textarea').textpandable();
});
3. Set the min/max number of rows. -1 means infinity.
$('textarea').textpandable({
minRows: 1,
maxRows: -1,
});
4. Set the maximum number of characters allowed in a line. When this limit is exceeded, the plugin will add a new row to the textarea. Default: 20.
$('textarea').textpandable({
width: 10
});
5. Set the padding & line-height properties of the textarea.
$('textarea').textpandable({
padding : 1,
lineHeight: "1.4em",
});
6. Apply a smooth transition to the textarea when expanding & collapsing. Default: 0 (disable).
$('textarea').textpandable({
speed: 200,
initSpeed: -1,
});
This awesome jQuery plugin is developed by thomshouse. For more Advanced Usages, please check the demo page or visit the official website.











