A small, stand-alone script to automatically adjust textarea height.


Released under the MIT License, source on Github (changelog)  


Install via NPM
npm install autosize

Browser compatibility

Chrome Firefox IE Safari iOS Safari Android Opera Mini
yes yes 9 yes yes 4 ?


The autosize function accepts a single textarea element, or an array or array-like object (such as a NodeList or jQuery collection) of textarea elements.

// from a NodeList

// from a single Node

// from a jQuery collection

Life-cycle Events

Event Description

Once you've assigned autosize to an element, you can manually trigger the resize event by using the 'autosize:update' event. Autosize has no way of knowing when a script has changed the value of a textarea element, or when the textarea element styles have changed, so this event would be used instruct autosize to resize the textarea.

var ta = document.querySelector('textarea');


ta.value = "Some new value";

// Dispatch a 'autosize:update' event to trigger a resize:
var evt = document.createEvent('Event');
evt.initEvent('autosize:update', true, false);
var ta = document.querySelector('textarea');

// assign autosize to ta

// remove autosize from ta
var evt = document.createEvent('Event');
evt.initEvent('autosize:destroy', true, false);

This event is fired every time autosize adjusts the textarea height.

var ta = document.querySelector('textarea');

ta.addEventListener('autosize:resized', function(){
  console.log('textarea height updated');

If you are using jQuery, you can use the on/off methods to listen to this event:

}).on('autosize:resized', function(){
  console.log('textarea height updated');


These methods are provided as an alternative to using the life-cycle events.

Name Description
autosize.update(elements) For manually recalculating the height for a textarea element, array, or array-like object.
var ta = document.querySelector('textarea');


ta.value = "Some new value";

autosize.destroy(elements) Removes autosize and reverts its changes from a textarea element, array, or array-like object.

Trouble shooting

Setting a min-height or max-height

Use CSS to specify a min-height and max-height for the textarea element. Once the height exceeds the max-height, autosize will re-enable the vertical scrollbar.

The rows attribute can also be used to specify a minimum height. The rows attribute has a default value of 2, so to make the textarea smaller than that you'll need to set the value to 1. Example: <textarea rows='1'></textarea>

Fixing slow or sluggish performance

In Webkit, the default focus style for input and textarea elements includes outline-style: auto, which has a blurred drop-shadow like appearance. Completely independent of autosize, Safari is terrible at animating anything with this blur on it. My recommendation would be to use a non-blurred outline-style, and to remove any blurred box-shadow or other taxing CSS effect. For example:

input:focus, textarea:focus {
  outline-style: solid;
  outline-width: 2px;

Initial height is incorrect

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 DOM or had its display set to none. If you want to assign Autosize to a hidden textarea element that you plan to reveal later, be sure to either specify the pixel width of the element in your CSS, or use the autosize.update method after you reveal the textarea element.

Possible ways to resolve:

  • Specify an exact width for the textarea element in your stylesheet.

  • Delay assigning autosize until the textarea has been revealed. Alternatively, wait until the user focuses the textarea element:

    var ta = document.querySelector('textarea');
    ta.addEventListener('focus', function(){
  • Use the autosize.update method (or trigger the autosize:update event) after the element has been revealed.

    var ta = document.querySelector('textarea'); = 'none';
    autosize(ta); = '';
    // Call the update method to recalculate the size:

Differences between v2 and v1

If you need the v1 version for whatever reason, you can find it in the v1 branch on Github:

Autosize v2 is a smaller, simpler script than v1. It is now a stand-alone script instead of a jQuery plugin, and support for IE8 and lower has been dropped (legacy IE users will be presented with an unmodified textarea element). Additionally, Autosize v2 does not take in any optional parameters at this time.

Autosize v2 does not create a mirror textarea element in order to calculate the correct height, which was responsible for much of the original script's complexity. This should be more efficient and reliable, but the new method prevents using a CSS transition to animate the height change.


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!