Autogrow Textarea Plugin 3.0 is here !

It’s been one and a half year since the the release of Autogrow Textarea Plugin Version 2.0. In that time, I received numerous feedback and I had the chance to exchange with the majority of developers using my plugin.

So it’s only natural for me to come with a newer version. This time, I had only one goal in mind. Make the textarea grow perfectly whatever the font used. Users of the previous versions will surely remember the strangeĀ behaviorĀ of the textarea when using proportional fonts. All this has been catered for in the new version.

But don’t take my word for it! Here, have a go yourself :

As usual, I’ve kept the integration to the bare minimum :

<script>
  $(document).ready(function() {
    $("#target").autoGrow();
  });
</script>

And here’s the full list of features :

  • The plugin uses a newer more reliable algorithm to resize the textarea as you type.
  • You can now use both proportional (like Arial) or monospaced (like Courrier) fonts.
  • You can now set the width of your textarea via CSS. The plugin no longer resizes the textareas on page load.
  • You can set the height of your textarea by simply using the rows attribute. The first resize is more fluid that way.

Getting the plugin is easy. It’s distributed on a Pay What You Want basis. Meaning, you can buy it at whatever price you want just by clicking on the button below :

Of course, the code is also available on Github. Be aware, however, that support will only be provided to paid users:

https://github.com/jevin/Autogrow-Textarea

So go ahead and have fun with it. And don’t forget to send your feedback and pull-requests !

68 Comments to “Autogrow Textarea Plugin 3.0 is here !”

  1. Kuanysh says:

    There is one plugin, which apparently was abandoned. You can add some of it’s features, like animation and additional rows.

  2. Bruce Sherwin says:

    I can’t run AvastAntiVirus Free.
    I can’t do anything to get Avast AntiVirus Free to run
    It must be locked up.
    Please, help me.
    Thanks a Lot! for your help!

  3. Bruce Sherwin says:

    This is the weirdest problem.
    I point to Avast AntiVirus Free but it won’t open.
    When I point to my Avast AntiVirus Free I just get “wrong password”
    What am I doing wrong?
    I can’t remember my password.
    Please, help me!
    Thank you! for your help!

  4. Bruce Sherwin says:

    Avast will not run.
    my Avast AntiVirus Free will not open
    When I try to run it i just get a “wrong password”
    I am unable to run it.

  5. Good work, but as a suggestion, I think it would be a great help to everyone if you write a pseudo-code or the general scenario for what you’ve done here. Something like:

    1) Check textarea for scroll every tenth seconds (100 milliseconds)
    2) If textarea has a scroll bar, then resize it,

  6. Those who were interested in animated the “growing” effect can replace the line:
    jQuery(textarea).height(jQuery(mirror).height());
    with:
    jQuery(textarea).animate({“height”:jQuery(mirror).height()}, 250, “linear”);

    250 is the time the animation takes – make it smaller to make it faster, bigger to make it slower.

    Nice work, Jevin.

  7. Chris says:

    Hi Jevin, great plugin.

    There is a little bug though when the textarea starts off hidden and is then shown, instead of growing when it needs to it grows with the input of every character(except space).

    Just letting you know and thanks again.

  8. Randy H. says:

    Hi Jevin,

    Thanks for the great plugin! I just wanted to comment on a couple of quirks I’ve noticed in IE:

    - I’ve found it helps to specify both the font family and size for the textareas. In some situations the mirror div will end up with a different font than what’s actually used if this isn’t done, causing the textarea to not resize correctly.
    - The size of the scrollbar needs to be subtracted from the width of the textarea when setting the size of the mirror div. In most cases it doesn’t matter, but if there is a lot of text or large words it can cause some lines to be hidden since the mirror is slightly wider than the textarea.

    Thanks again for sharing your work!

    Randy

  9. ric says:

    on v2, how dp i call the script to act when i populate a textarea using jquery,
    like:

    $(‘#textarea2′).val(‘just one line’);

    ?

  10. gd says:

    Had an error in IE8 in sendContentToMirror, line mirror.innerHTML = etc…

    and made everything inside (esp. the mirror element ) the script a jQuery element.
    It is a jQuery fn function anyway so no harm done.
    And everything is working fine.

    Nice little script with large impact
    thnx

  11. rAthur says:

    Hi man !

    I’ve modified a bit the source of the min version to allow the user to animate the growth for a smoother effect, and also set a maximum height for the textarea so it doesn’t grow too much.

    The function now accepts 2 optionals parameters like this :

    $(“#target”).autoGrow(animation_time, max_height);
    -> animation_time represents the time the textarea takes to grow in milliseconds
    -> max_height represents the max height the textarea can take in pixels

    For example :

    $(“#target”).autoGrow(100, 500);

    Will make my textarea grow in 100 ms when adding or deleting rows, and stops growing when it hits 500 px height.

    To do so, just change the first line of JS in jquery.autogrowtextarea.min.js with this :

    jQuery.fn.autoGrow=function(textarea_anim_time,textarea_max_height){if(!textarea_anim_time)textarea_anim_time=0; return this.each(function(){var createMirror=function(textarea){jQuery(textarea).after(”);return jQuery(textarea).next(“.autogrow-textarea-mirror”)[0]};var sendContentToMirror=function(textarea){mirror.innerHTML=String(textarea.value).replace(/&/g,”&”).replace(/”/g,”"”).replace(/’/g,”'”).replace(//g,”>”).replace(/\n/g,””)+”..”;if(jQuery(textarea).height()!=jQuery(mirror).height())jQuery(textarea).stop(true).animate({‘height’:(textarea_max_height?((jQuery(mirror).height()textarea_max_height)?’auto’:’hidden’)})};

  12. teresa says:

    In case anyone else is stuck using an older version of jQuery with this plugin, as I am for a project I’m working on (I’m using 1.5.1), IE8 chokes on it and you get an invalid argument error in jquery.js if you declare padding using the four-sides shorthand (padding: n n n n) or the single-side declaration (padding-right: n). My solution is to set equal padding for all sides using the “regular” syntax (padding: n) in an IE8-specific stylesheet. Haven’t tested lower than IE8.

  13. Anne says:

    That’s actually a pretty neat plugin.

Leave a reply