Autosize: dynamic textarea sizing plugin

textarea autosize

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.

download

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

Leave a Reply

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