Skip to content

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]

Published inCoding