Autogrow Textarea is a simple jQuery plugin that allows textareas to grow vertically when text is typed in. Many of you will find this quite familiar, since it is used extensively on social networking giant, Facebook.
You can try out the plugin below:
As you can see, this simple growth comes very naturally to the user. It can be useful for sites needing large user input. So if you would like to use this plugin, read the quick guide below.
- First, you will need to download this one file: jquery.autogrowtextarea.js.
- After downloading and importing the script you will need to add some CSS to your page, as follows.
<style type="text/css"> textarea { overflow:hidden; height:auto; width:326px; } </style>The overflow and height properties should remain unchanged. The width however is tricky. You see, textarea’s are not generated the same way in different browsers, meaning that each browser will set a different width to your textarea. To counter this, I have created a small script that will give you the right width to use.
I have set my width to 346px since I am using 40 columns for my textarea. It’s nice to point out that the default textarea font size is 13px.
- With all that done, you can call the plugin this way:
<script type="text/javascript"> $(document).ready(function(){ $("#txtInput").autoGrow(); }); </script> <textarea id="txtInput" cols="40" rows="5"></textarea>Where “txtInput” is the textarea’s identifier and “autoGrow()” is the function that activates the plugin for the selected textarea.
As you can see, the implementation is quite straightforward. I am planning to include automatic width detection in the plugin, so you don’t have to generate the appropriate width every time.
If you like this plugin and would like to suggest features, or report bugs, you are welcome to contact me.
Posted in 
[...] This post was mentioned on Twitter by Technoreply. Technoreply said: Autogrow Textarea Plugin http://bit.ly/d2aiY0 [...]
[...] Try out a demo [...]
This functions is really great, lightweight to, however it doesnt seem to run in firefox and opera so well!
[...] View Demo | Download Plugin [...]
Works fine in Opera 10.60 beta (Ubuntu Linux) for me.
[...] Here is the plugin in question. [...]
sorry but this code do not work if some content is pasted by right lick and paste.
Excellent! I’ve tried several of these, and although they had more configuration options, none of the others would work with jQuery 1.4.2.
Nice one.thanks for this. I had some problems with the plugin posted on jQUery site.
this one works also with dynamic font-size changing, while posted on plugins.jQuery was buggy:)
thank you
Thanks for your comments people. I really appreciate it.
Aha Niraj! Nice found. It indeed does not work on right click and paste. The script only listens to keyboard input actually. I’ll see how this can be dealt with in the next release. Thanks for pointing this out.
How do I make this work with .live()?
useful script, I found a similar one here (this has an animation too) http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Nice code, really useful.
I found an error though, it removes all other onkeyup event handlers on the field.
All you have to do is change the bindEvents in your code to:
function bindEvents(txtArea)
{
txtArea.onkeyup(function() { grow(txtArea); });
}
instead.
plugin fails when bind to several textarea’s by, for example, class.
when bind by id – all works.
when several – wrong row counts and so on…