jQuery Autosize

A plugin to automatically adjust textarea height.


Fork me on GitHub

Demo

Download

Released under the MIT License. Source on Github (changelog).
Compatible with: jQuery 1.7+ in Chrome, Firefox 4+, Safari 5+, Internet Explorer 6+, Opera 11+.
Bower Package: jquery-autosize

Usage

// Example:
$(document).ready(function(){
    $('textarea').autosize();   
});

Drop Autosize into any existing website and it should Just Work™. The source is short and well commented if you are curious to how it works.

Manual Triggering

Autosize has no way of knowing when the value of a textarea has been changed through JavaScript. If you do this, trigger the autosize.resize event immediately after to update the height. Example:

$('#example').val('New Text!').trigger('autosize.resize');

Removing Autosize

Trigger the autosize.destroy event to remove autosize from a textarea element:

$('#example').trigger('autosize.destroy');

Settings

Property Default Description
className '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 '' For appending whitespace to the end of the height calculation (an extra newline improves the appearance when animating). Example $('.textarea').autosize({append: "\n"});
callback false A function to call when the textarea is resized.

Known Issues & Solutions

Incorrect size with hidden textarea elements

Autosize needs to be able to calculate the width of the textarea element when it is assigned. JavaScript cannot accurately calculate the width of an element that has been removed from the document flow. If you want to assign Autosize to a hidden textarea element, be sure to either specify the pixel width of the element in your CSS, or trigger the autosize.resize event after you reveal the textarea element.

Possible ways to resolve:

$('textarea.example').autosize().show().trigger('autosize.resize');
$('textarea.example').fadeIn(function(){
    $(this).autosize();
});
$('textarea.example').on('focus', function(){
    $(this).autosize();
});

Incorrect size when zoomed in Chrome

Autosize may not be big enough to fit all text in Chrome if it is zoomed in. This should only happen when the line-height for textarea elements is set to a numeric value (ie. line-height: 1.4) rather than a length or percent value (ie. line-height: 1.4em or line-height: 140%). There is apparently an issue with the getComputedStyle value that Chrome calculates for numeric line-height values for textarea elements when zoomed. There isn't anything the plugin can do to correct this behavior, however the bug can be avoided in a couple of ways.

Possible ways to resolve:

textarea {line-height: 1.4 !important;}

Incorrect size 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:

#content textarea, .autosizejs { line-height:20px; }

Incorrect size in any IE:

For all browsers, the font-family for form elements are not inherited from their parent elements, unless the style is explicitly set to inherit. When JavaScript is used to get the computed style for a textarea's font-family, all versions of IE will incorrectly return the inherited font-family if a font-family style was not explicitly set. This can cause Autosize's calculations to be off. The solution is to set a font-family for textarea elements in your stylesheet:

/* set to a specific font-family */
textarea { font-family: Tahoma, sans-serif; }

/* or explicitly inherit */
textarea { font-family: inherit; }

About CSS transitions

You may want to use a CSS transition on the height of a textarea, but not want to show the transition when Autosize is first applied. For example, if you had a textarea that was already pre-filled with text and you wanted to show a non-transitioned Autosize on page load. The easiest solution would to add the class associated with the transition after Autosize has been assigned:

var $ta = $('textarea');

$ta.autosize();
document.body.offsetWidth; // force a reflow before the class gets applied
$ta.addClass('textarea-transition');

Hey,

Follow me on Twitter and Github, that's where I'm most active these days. I welcome email (), but I'm afraid I no longer have time to answer personal requests for help regarding my plugins or posts. Thanks!