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 !

Pingback: Autogrow Textarea Plugin | Technoreply
Pingback: Autogrow Textarea Plugin Version 2.0 | Technoreply
Pingback: Show HN: Selling code on a Pay What You Want basis | My Daily Feeds
November 16, 2012 at 7:11 am
There is one plugin, which apparently was abandoned. You can add some of it’s features, like animation and additional rows.
November 16, 2012 at 7:12 am
forgot to add a url)) https://github.com/brandonaaron/jquery-expandable
November 28, 2012 at 4:57 pm
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!
November 28, 2012 at 5:04 pm
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!
November 28, 2012 at 5:09 pm
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.
December 7, 2012 at 5:06 am
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,
…
December 11, 2012 at 1:06 pm
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.
December 11, 2012 at 1:07 pm
Oof – you’ll want to replace the ‘bendy quotes’ in my post for normal ones.
December 18, 2012 at 5:07 am
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.
January 10, 2013 at 11:41 am
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
January 20, 2013 at 10:46 am
on v2, how dp i call the script to act when i populate a textarea using jquery,
like:
$(‘#textarea2′).val(‘just one line’);
?
January 20, 2013 at 11:01 am
it should be updating due to change(), but it’s not.
February 14, 2013 at 3:32 am
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
February 27, 2013 at 9:26 am
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’)})};
February 27, 2013 at 9:31 am
Oups, there seem to be a problem of encoded caracters while posting comment…
Here’s a link to my modified version so you can take the whole source :
http://www.rAthur.fr/jQuery/jquery.autogrowtextarea.min.js
April 30, 2013 at 8:31 pm
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.
Pingback: Duotive Keep for WordPress (Creative)Feeds | Feeds
Pingback: Duotive Keep for WordPress (Creative) - ThemeHills
Pingback: Duotive Keep for WordPress (Creative) | Digital Goods
Pingback: Duotive Keep for WordPress (Creative) |
Pingback: Duotive Keep for WordPress (Creative) | Wordpress Theme Collections
Pingback: Duotive Keep for WordPress (Creative) | Themeforest
Pingback: Duotive Keep for WordPress (Creative) | Links.mk
Pingback: Duotive Keep for WordPress (Creative) | Themes & Templates
Pingback: Duotive Keep for WordPress (Creative) Download - PROFIREFOX
Pingback: Duotive Keep for WordPress (Creative) | Creative Coders | Blog
Pingback: Duotive Keep for WordPress (Creative) | themesift©
Pingback: Duotive Keep for WordPress (Creative) | Ace Template
Pingback: Duotive Keep for WordPress (Creative) | Wordpress Design News
Pingback: Duotive Keep for WordPress (Creative) | Wordpress
Pingback: Duotive Keep for WordPress (Creative) ‹ Wordpress Universe
Pingback: Duotive Keep for WordPress (Creative) | TopThemeForest.com
Pingback: Download Duotive Keep for WordPress (Creative)
Pingback: Duotive Keep for WordPress (Creative)Web Procyon
Pingback: Duotive Keep for WordPress (Creative) | Briginfo
Pingback: Premium wp responsive » Premium wordpress themes » Duotive Keep for WordPress (Creative)
Pingback: Duotive Keep for WordPress (Creative) | APP
Pingback: Duotive Keep for WordPress (Creative) | The FreeFastSite.com
Pingback: Duotive Keep for WordPress (Creative) | My Blog
Pingback: Duotive Keep for WordPress (Creative) | YScripts
Pingback: Duotive Keep for WordPress (Creative) | YThemes
Pingback: Duotive Keep for WordPress (Creative) | Best WP Themes
Pingback: Duotive Keep for WordPress (Creative) | webmasterheaven.net
Pingback: Duotive Keep for WordPress (Creative) | Wordpress E-Commerce Themes
Pingback: Duotive Keep for WordPress (Creative) | WPStream.com