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 grow
  })
  .on('textAdjust.shrink', function(event, oldRows, newRows){
    // on shrink
  })
  .on('textAdjust.nochange', function(event, oldRows, newRows){
    // when no change
  })
  .on('textAdjust.init', function(event){
    // on init
  })
  .on('textAdjust.destroy', function(event){
    // on destroy
  });

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.