Try it out!

Download

You can get the code from Github, by cloning the repository, like so:

$ git clone git@github.com:carlrafting/autogrow.git

If you'd rather like to download a .zip, check out the releases.

Usage

To use autogrow in you project, include the stylesheet and javascript file that comes with it.

Add this line inside your <head>

<link rel="stylesheet" href="path/to/autogrow.css">

And this one before </body>

<script src="path/to/autogrow.js"></script>

As an alternative you could just copy-and-paste the following code into your existing project files.

After you have linked to the autogrow files, you'll need to wrap your textareas in a container, a div for example, but anything works, and set the containers class to .autogrow-container. You can also set your own class on the container, see customization options below. This is what it should look like with the default container class-name:

<div class="autogrow-container">
<textarea></textarea>
</div>

Lastly, call autogrow.init() from your script.

Customization

autogrow gives you options to set different class-names to the elements that get generated by the script. These are the options that you can set:

autogrow.init({
  containerClass: 'your-container-class',
  spanClass: 'your-span-class',
  mirrorClass: 'your-mirror-class',
  activeClass: 'your-active-class',
  areaClass: 'your-area-class'
});

Background

autogrow is based on code from “Expanding Text Areas Made Elegant” by Neil Jenkins. You can read some more background in this blog post.