The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Autosize : jQuery plugin for dynamic textarea sizing

Plugin rate :

Autosize is a small jQuery plugin to allow dynamic resizing of textarea height, so that it grows as based on visitor input. To use, just call the .autosize() method on any textarea element.

Example :

 $('textarea').autosize();

Released under the MIT license.

Implementation: 

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>
Options: 
className
String
Default : autosizejs - The className property is used to specify a class for the mirrored element, in case it's necessary to explicitly set a style on the mirrored element (see the note about line-height below).
append
String
Default : '' - For appending whitespace to the end of the height calculation (an extra newline improves the apperance when animating). Example $('.textarea').autosize({append: "\n"});
Methods: 
callback
Function
Returns : false - A function to call when the textarea is resized.
Screenshots

Comments

I every time spent my half an hour to read this weblog's articles everyday along with a cup of coffee.

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
1.13
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [1]