Expanding Textareas

How do they work?

Based on Neil Jenkins' work at alistapart, an invisible clone pre element is maintained behind your textarea. Whenever the height of this pre changes, the textarea is updated.


Include expanding.js and jQuery in your page. Any textareas with the expanding class will then be transformed.

<script src='expanding.js'></script>
<textarea class='expanding'></textarea>

Advanced usage details on the GitHub page (includes programmatic creation).


You can style the textarea however you like (including max-height). This plugin has been tested in Chrome, Safari, Firefox, IE8, and mobile Safari.