Autosize : jQuery plugin for dynamic textarea sizing

1. First, include jQuery files

1
2
3

<!-- Js Files -->
<script type='text/javascript' src='jquery.js'></script>  
<script type='text/javascript' src='jquery.autosize.js'></script>  

2. Write your HTML

1
2
3

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

3. Finnaly, call the plugin

1
2
3
4
5
6
7

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

A note about line-height in IE8:

Autosize adds a hidden textarea element to your document that mirrors the original textarea's input. This mirrored textarea is used to calculate the size that the original textarea should be. The mirrored textarea copies the original textarea's styles that relate to text formatting.

One copied style is line-height, and IE8 does not accurately report the line-height value for textarea elements. This is not an issue when the line-height is specified for the bare textarea selector (ie: textarea { line-height:20px; }), because that style is also applied to the mirrored element. It's only a problem when using a more specific selector (ie: #content textarea{ line-height:20px; }). This style isn't applied to the mirrored textarea that Autosize creates, and it cannot copy the style from the original textarea because IE8 reports the wrong value. As a workaround, Autosize adds a class to the mirrored element so that it can be targeted for styling. Example:

1
2
3
4
5
6
7
8

<style>
    #content textarea, .mirroredText { line-height:20px; }
</style>
<script>
    $(document).ready(function(){
        $('textarea').autosize({className:'mirroredText'});
    });
</script>