Autosize

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


Fork me on GitHub

Demo


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

Download

Install via NPM
npm install autosize
Install via Bower
bower install autosize

Browser compatibility

ChromeFirefoxIESafariiOS SafariAndroidOpera Mini
yesyes9yesyes4?

Usage

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
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

Life-cycle Events

Event Description
autosize:update

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

autosize(ta);

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);
ta.dispatchEvent(evt);
autosize:destroy
var ta = document.querySelector('textarea');

// assign autosize to ta
autosize(ta);

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

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:

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

Methods

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

autosize(ta);

ta.value = "Some new value";

autosize.update(ta);
autosize.delete(elements) Removes autosize and reverts it's changes from a textarea element, array, or array-like object.
autosize.delete(document.querySelectorAll('textarea'));

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 it's 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:

Differences between v2 and v1

If you need the v1 version for whatever reason, you can find it in the v1 branch on Github: https://github.com/jackmoore/autosize/tree/v1

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.


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!