Autogrow Textarea Plugin

[red_box]Check out the newer version of this plugin![/red_box] 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">

    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.


    Font size(in px):

    Appropriate textarea width: px[/yellow_box]

    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">
    <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.

[red_box]Check out the newer version of this plugin![/red_box]

52 thoughts on “Autogrow Textarea Plugin”

  1. 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

  2. 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.

  3. 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); });


  4. 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…

  5. I have an idea to help when we don’t use the cols attribute (this is my case, I often use css width at 100%).

    function grow(txtArea)

    var lh = $(txtArea).css(“line-height”);
    lh = parseInt(lh.substring(0, lh.length-2)); = txtArea.scrollHeight+’px’;
    var h =;
    h = h.substring(0, h.length-2);
    if (txtArea.scrollHeight > h)
    { = txtArea.scrollHeight+’px’;
    h = txtArea.scrollHeight;
    while (h >= txtArea.scrollHeight)
    { = (txtArea.scrollHeight-lh)+’px’;
    h =,;
    } = (parseInt(txtArea.scrollHeight)+lh)+’px’;


  6. I have pasted the code it doesn’t work

    Untitled Document





  7. this plugin is a simple alternative to other “auto-resizing” jQuery plugins despite the fact that it requires styling Your s accordingly …
    but I did found the code a bit “ugly” – it pollutes the global name-space – here’s a more jQuerish version of the plugin (including a live sample):

  8. I tried this code. However, if I save the form and then refresh the page, the textarea’s height doesn’t expend to fit the whole words…is there a way to initial text area with content height?

  9. @Princa just trigger the “resize” for the textarea on refresh – in the case of the original plugin You’ll need to: $(‘#your_textarea’).trigger(‘keyup’);

    if You try-out my adopted version it might as well work with tha change event $(‘#your_textarea’).trigger(‘change’); (might be more logical in case there are others bound to key events).

  10. @Kares,
    I tried your code too, it’s not trigger the autoGrow() when the page is load, unless i have key changes events.
    I defined default col & row of textarea, but when I have more contents and save refresh the page, it’s not loading all the contents, which is annoying….

  11. @Princa,

    You are right. The plugin needs a trigger to work. In this case, the key change event.
    I will consider your point when building version 2 of this plugin. 😉

  12. @kares

    I’ll take your input into account when creating the new version. Thanks for that. As you mentioned, it does pollute the namespace. I will check on that.

  13. Sadly, on my FF4 when I type around 25 lines autogrow starts to delay. I can’t see what I am typing. And sadly this happens even on Facebook or any other autogrow algorithm I came across. I believe it can better work with monospaced font but you can never guess number of written lines exactly. If you can manage it somehow for your next version you’re God and I will worship you.

  14. Using Chrome 9.0.597.107, the demo at the top of this page doesn’t work.

    Ironically, this textarea (for entering my comment) is expandable, as it is on other pages on this blog!

  15. Great thanks Adam!

    I have been tested on FF, chrome,safari, ie8:
    on page load auto-resize textarea working on: Chrome, FF. not working on: ie8 & safari.

    Have you ever tested on different browsers?

Leave a Reply

Your email address will not be published. Required fields are marked *


Please enter the CAPTCHA text