Autosize

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

Demo

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	?

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

Methods

Name Description

autosize.update(elements)

Name	Description
autosize.update(elements)	Triggers the height adjustment for an assigned textarea element. Autosize will automatically adjust the textarea height on keyboard and window resize events. There is no efficient way for Autosize to monitor for when another script has changed the textarea value or for changes in layout that impact the textarea element. `// Init var ta = document.querySelector('textarea'); ta.style.display = 'none'; autosize(ta); // Change layout ta.style.display = 'block'; autosize.update(ta); // Change value ta.value = "Some new value"; autosize.update(ta);`
autosize.destroy(elements)	Removes Autosize and reverts any changes it made to the textarea element. `autosize.destroy(document.querySelectorAll('textarea'));`

Triggers the height adjustment for an assigned textarea element. Autosize will automatically adjust the textarea height on keyboard and window resize events. There is no efficient way for Autosize to monitor for when another script has changed the textarea value or for changes in layout that impact the textarea element.

// Init
var ta = document.querySelector('textarea');
ta.style.display = 'none';
autosize(ta);

// Change layout
ta.style.display = 'block';
autosize.update(ta);

// Change value
ta.value = "Some new value";
autosize.update(ta);

autosize.destroy(elements)

Removes Autosize and reverts any changes it made to the textarea element.

autosize.destroy(document.querySelectorAll('textarea'));

Life-cycle Events

Event Description

autosize:resized

Event	Description
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'); });`
autosize:update	Dispatch this event on a textarea element as an alternative to using the `autosize.update` method. Note that Firefox does not dispatch events on disabled elements. `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	Dispatch this event on a textarea element as an alternative to using the `autosize.destroy` method. Note that Firefox does not dispatch events on disabled elements. `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);`

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

autosize:update

Dispatch this event on a textarea element as an alternative to using the autosize.update method. Note that Firefox does not dispatch events on disabled elements.

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

Dispatch this event on a textarea element as an alternative to using the autosize.destroy method. Note that Firefox does not dispatch events on disabled elements.

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

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 detached 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(){
  autosize(ta);
});
```

Use the autosize.update method (or trigger the autosize:update event) after the element has been revealed.

var ta = document.querySelector('textarea');
ta.style.display = 'none';
autosize(ta);
ta.style.display = '';

// Call the update method to recalculate the size:
autosize.update(ta);

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!

Follow @jacklmoore