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!
You can get the code from Github, either by downloading a .zip-file or by cloning the repository, like so:
$ git clone firstname.lastname@example.org:carlrafting/autogrow.git
<link rel="stylesheet" href="path/to/autogrow.css">
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
.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:
autogrow.init() from your script.
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:
The code for autogrow is tested and is working in the following browsers:
- Chrome 18
- Firefox 11
- Safari 5
- Opera 11 (Kinda works) *
* 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.