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

    [yellow_box]Columns:

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

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

49 Comments to “Autogrow Textarea Plugin”

  1. JesperA says:

    This functions is really great, lightweight to, however it doesnt seem to run in firefox and opera so well!

  2. Jonas says:

    Works fine in Opera 10.60 beta (Ubuntu Linux) for me.

  3. Niraj says:

    sorry but this code do not work if some content is pasted by right lick and paste.

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

  5. Jaroslav says:

    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

  6. Jevin says:

    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.

  7. auspuff says:

    How do I make this work with .live()?

  8. davide says:

    useful script, I found a similar one here (this has an animation too) http://james.padolsey.com/javascript/jquery-plugin-autoresize/

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

  10. Anton says:

    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…

  11. Mathieu Moulin says:

    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.style.height = txtArea.scrollHeight+’px';
    var h = txtArea.style.height;
    h = h.substring(0, h.length-2);
    if (txtArea.scrollHeight > h)
    {
    txtArea.style.height = txtArea.scrollHeight+’px';
    h = txtArea.scrollHeight;
    }
    while (h >= txtArea.scrollHeight)
    {
    txtArea.style.height = (txtArea.scrollHeight-lh)+’px';
    h = txtArea.style.height.substring(0, txtArea.style.height.length-2);
    }
    txtArea.style.height = (parseInt(txtArea.scrollHeight)+lh)+’px';

    }

  12. Anil says:

    I have pasted the code it doesn’t work

    Untitled Document

    textarea
    {
    overflow:hidden;
    height:auto;
    width:326px;
    }

    $(document).ready(function(){

    $(“#user_post”).autoGrow();

    });

  13. kares says:

    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): https://gist.github.com/802204

  14. Princa says:

    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?

  15. kares says:

    @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).

  16. Princa says:

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

  17. Jevin says:

    @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. ;-)

  18. Princa says:

    when the version2 is out?! :P

  19. Jevin says:

    @Princa

    In around 2 or 3 weeks time. ;-)

  20. Jevin says:

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

  21. Kirara says:

    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.

  22. Adam says:

    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!

  23. Jevin says:

    The second version is up. Please use the newer version. Link here : http://www.technoreply.com/autogrow-textarea-plugin-version-2-0/

    @Adam
    I’m on Chrome 10.0.648.133 and it’s working on my side. I have just uploaded the second version of the plugin. Can you try and see if that one works?

  24. Princa says:

    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