JavaScript Library For Auto-grow Textarea Based On Its Content

Category: Form , Javascript | April 23, 2015
Author: CodingAspect
Views Total: 1,058 views
Official Page: Go to website
Last Update: April 23, 2015
License: MIT

Preview:

JavaScript Library For Auto-grow Textarea Based On Its Content

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);
  }
}

You Might Be Interested In:


Leave a Reply