Background

Sometimes textareas suck. Often times they're not very pleasant to use, especially when you're going to write lots of text, because at some point that scrollbar will appear, and nobody likes that. Right? It certainly doesn't make for a very nice user-experience.

So this is what autogrow is trying to solve. There are other scripts like this out there, but many of them depend on jQuery, autogrow doesn't. Then “Expanding Text Areas Made Elegant” by Neil Jenkins got published and he demonstrated a very nice way to deal with expanding textareas, autogrow is based on his code, but made to be more reusable, customizable and well... Slightly different. You can read some more background in this blog post.

Try it out!

Download

You can get the code from Github, either by downloading a .zip-file or by cloning the repository, like so:

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

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

Browser support

The code for autogrow is tested and is working in the following browsers:

* Kinda works in Opera 11, but there's a quite annoying flickering when entering new lines. At the moment the solution is to use browser-sniffing and address the issue specifically for Opera, but i want to avoid that. I'll see if i can address this in a sane way in a future release.

Browsers that doesn't support autogrow should instead get a standard textarea, instead of the enhanced autogrowing one.