JavaScript Library For Auto-grow Textarea Based On Its Content

Preview:

Description:

A minimalist JavaScript library used to make your textarea auto grow vertically based on its content. Also comes with an useful parameter which allows you set the max lines for the auto-grow textarea.

How to use it:

Load the textarea-autogrow.js JavaScript library in your web project.

<script src="textarea-autogrow.js"></script>

Create a normal textarea with the initial row number.

<textarea id="demo" rows="3" class="form-control"></textarea>

Add the following CSS snippet into your CSS file.

#demo {
  resize: none;
  box-sizing: content-box;
}

Initialization and pass the maxLines parameter to limit the max rows of the textarea.

document.onreadystatechange = function(){
  if(document.readyState == "complete"){
    var maxLines = 10,
        textarea = document.getElementById('demo');
    var autoGrowTextarea = new Autogrow(textarea, maxLines);
  }
}