Autosize: dynamic textarea sizing plugin

Autosize is a small jQuery plugin that allow textarea autosize making height dynamically so that it expands as based on visitor input.

You can implement textarea autosize by calling the .autosize() method on any textarea element.

Example of textarea autosize:

$('textarea').autosize();

For implementation autosize in your website you need to follow below steps:

Include jQuery library:

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.autosize.js'></script>

Your HTML code:

<form>
<textarea id="txtID" name="txtID"></textarea>
</form>

At last, call the plugin:

<script type="text/javascript">
$(document).ready(function() {
$('textarea').autosize();
});
</script>

Read Also: 10 best jQuery Notification plugin

How it works:

When calling autosize, it adds a hidden textarea element to you document that mirrors the original textarea’s input. Mirrored textarea is used to calculate the size what the actual textarea should be. Then the mirrored textarea copies the actual textarea’s styles that relate to text formatting.