jQuery-Plugin adjusting height of textareas based on value – jquery.textAdjust
Yet another useful jQuery userfule plugin which help you to adjusting height of textareas based on value. textAdjust is a small yet customizable jQuery auto grow plugin for textarea
element that automatically adjusts the height of your textarea to fit the content while typing.
How it works
When user typing in bound textareas, the rows-attribute gets adjusted from min-rows up to max-rows trying not to see a scrollbar (except max-rows reached).
Rows gets calculated based on scrollHeight and line-height gets respected.
Libraries
Include the plugin’s js library jquery.textAdjust.min.js after jQuery core library.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="jquery.textAdjust.min.js"></script> |
HTML
Create a normal textarea
element and specify the min/max number of rows using the HTML5 data
attributes:
<textarea id="demo" rows="4" data-min-rows="2" data-max-rows="5"> </textarea> |
JS
Call the function textAdjust
on the textarea
element and the plugin will do the rest.
$(function(){ $('#demo').textAdjust() }); |
defile Min/Max rows using plugin.
$(function(){ $('#demo').textAdjust({ min: 7, max: 9 }) }); |
Removes plugin from target and unbinds all events.
$(function(){ $('#demo').textAdjust('destroy'); }); |
Available events/callbacks
$('#demo').textAdjust() .on('textAdjust.grow', function(event, oldRows, newRows){ }) .on('textAdjust.shrink', function(event, oldRows, newRows){ }) .on('textAdjust.nochange', function(event, oldRows, newRows){ }) .on('textAdjust.init', function(event){ }) .on('textAdjust.destroy', function(event){ }); |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by onuo. Visit their official github repository for more information and follow for future updates.