jQuery Autosize

A plugin to automatically adjust textarea height.

Fork me on GitHub



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


// Example:

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');

The autosize.resize event only accounts for changes in value. If you changed any of the typographic styles (font-size, line-height, etc), or the max-width, you can call autosize.resizeIncludeStyle and the textarea will resize with those styles accounted for:

$('#example').css({font-size: '20px'}).trigger('autosize.resizeIncludeStyle');

Removing Autosize

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



Property Default Description
className 'autosizejs' The class name 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).
id 'autosizejs' The id of the hidden mirrored element, in case you prefer to access it by id.
callback false A function to call when the textarea is resized.
append "\n" By default, an extra newline is appended at the end of the text used in the height calculation. This smooths out the height adjustment when animating. This also avoids an issue with IE10+ briefly causing text to shift immediately before the height is increased. You can set this property to false or other falsey value to remove the appended text.
placeholder true If the textarea is empty and has a placeholder value, autosize will use the length of the placeholder text to determine the height. Set to false to ignore the placeholder value.
resizeDelay 10 Textareas with autosize assigned will have their height re-calculated when the window is resized. This property is the debounce delay in miliseconds to prevent the resize from triggering too frequently. This can be set to false if the textarea has a static width that will not change during a window resize.

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').on('focus', function(){

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');

document.body.offsetWidth; // force a reflow before the class gets applied


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!