Today, I am glad to announce a new version of the Autogrow Textarea plugin. There were quite a few people that submitted feedback and I tried to take all that into consideration. Your comments are still welcome.
The plugin can be tried on this textarea:
It may not be apparent, but there are a quite a few things that have changed with this new version. Here’s the list:
- It automatically resizes your textarea; before you had an algorithm that calculated the correct width according to your font-size and cols settings. Now, the plugin does it automatically. Big time saver.
- It automatically sets the correct CSS attributes; before the user had to enter this manually in the CSS file. Now it’s done by the plugin.
- The plugin is fired when the page loads; a lot of users requested this feature. When you load a page with data already entered in the textarea, the latter will automatically resize itself.
- The plugin fires on more events; the plugin used to be fired when the user was typing. Now it does more than that.
- It no more pollutes the global namespace; if you’re not familiar with these terms, let’s just say the code will not conflict with other Javascripts.
You may have guessed it. The setup is now much faster. You simply download the plugin : jquery.autogrowtextarea.js and call the Javascript method. The code is :
<script type="text/javascript">
$(document).ready(function(){
$("#txtInput").autoGrow();
});
</script>
<textarea id="txtInput" cols="40" rows="5"></textarea>
There you go. Enjoy! And do leave your feedback, please.
January 21, 2012 at 5:11 am
I have pages with up to 200 textareas, most of them initially invisible, and there was a problem when your code would leave them with cols=”1″ when they contained no text. So I tweaked the code a bit:
// binding
this.onkeyup = grow;
this.onfocus = grow;
this.onblur = grow;
// Manipulations
this.style.width = “auto”;
this.style.height = “auto”;
this.style.overflow = “hidden”;
if ($(this).val()) {
this.style.width = ((characterWidth(this) * this.cols) + 6) + “px”;
growByRef(this);
}
});
And then this works perfectly – tried in FF7, IE8, Chromium (doesn’t report version). Much easier and faster than Padolsey’s, which relies on a ghost clone of the textarea, which then needs to have several properties specially set, height 0, then scrolls 10000 and tries to get .scrollTop() – which turned out rather unreliable in my setting. I’ve had IE return random numbers, textarea growing and shrinking by a line every time I touch a key (even arrows) etc. With 250 textareas, it would take 45 seconds to do them all – same page now renders in 6 seconds.
This works