Library of the Week: Autosize

Among other things, good user interface design means choosing the right size for form elements. Make a textarea too small, and the user won't have an overview of the text they are entering. It is especially hard to navigate around the text and modify it in this case. On the other hand, if the textarea is too big then it uses up needless screen real estate and makes your page appear unbalanced.

The obvious solution is to have the textarea start out small and expand as text is entered. A bit of googling turns up a number of libraries that purport to do this, both standalone and jQuery plugins. Some have ugly glitches like scrolling the textarea before it is resized so that the text "jumps".

The best of the bunch may be Autosize by Jack Moore. It is rock solid and supports a range of common use cases with enviable simplicity:

// from a NodeList
autosize(document.querySelectorAll('textarea'));

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

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

Matthew Gertner