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.
Licensing
A lot of people have been emailing/commenting asking about Autogrow Textarea’s licensing. I finally decided I to go with this one : Beerware License.
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
February 29, 2012 at 11:00 am
I’m looking for a callback function when the textarea resizes so I can resize other things on the page – any ideas?
Thanks!
- Devin
February 29, 2012 at 12:32 pm
Well, you can call your other functions right after the “$(‘#txtInput’).autoGrow();” line.
February 29, 2012 at 1:40 pm
This is a great script. However in my case my textareas need to be set to 100% of the browser width so the cols attrib doesn’t work for me. Can you suggest a way to get around it?
March 1, 2012 at 10:08 am
If i use Firefox and resize the textarea by hand (smal icon in the bottom right in the textarea, a Firefox inbuild feature) the textarea wont grow any more if i enter text
March 5, 2012 at 12:41 pm
Try setting the css resize style on the textarea to none. e.g. style=”resize: none”
March 6, 2012 at 10:56 pm
What licence under which this plugin come in? Is it MIT?
March 13, 2012 at 5:16 am
Should calculate cols if they aren’t set from width.
It would be good for Tom too.
March 28, 2012 at 9:31 am
Having probelms getting this to work. First I simply copied the code exactly. I’m guessing that there’s got to be more to this. Do I have to put a ‘script src=’ in the head? When running this through firefox, the error console gives me a
“jQuery is not defined” in the jquery.autogrowtextarea.js and a ”
$ is not defined” in my php page. What am I missing? Thanks.
March 28, 2012 at 9:36 am
Wow. As soon as I hit the ‘post’ on this, I figured it out. I (as a newb) never called jquery to begin with. Just thought (foolishly) what you gave as code was all I needed. I learned something today and I thank you for that.
April 10, 2012 at 3:17 am
The expansion isn’t happening only at line breaks. It grows at any point of the line which makes it slightly ‘imperfect’. Do you have a fix?
May 11, 2012 at 11:05 am
Does it HAVE to be a minimum of 2 rows? I’m trying to create a single line textarea but it automatically sets it to a minimum of 2 rows.
May 14, 2012 at 11:25 am
I want to add top margin to my send button whenever textarea expands, so it will keep send button aliging middle to it, I have tried everything but its not working for me, could you please help me out with this, here is the script:
jQuery.fn.autoGrow = function(){
return this.each(function(){
// Variables
var colsDefault = this.cols;
var rowsDefault = this.rows;
var addmargin = 0;
//Functions
var addmargintop = function () {
addmargin = addmargin + 5;
$(‘#sendMessageButton’).css(“margin-top”,addmargin);
}
var grow = function() {
growByRef(this);
addmargintop();
}
var growByRef = function(obj) {
var linesCount = 0;
var lines = obj.value.split(‘\n’);
for (var i=lines.length-1; i>=0; –i)
{
linesCount += Math.floor((lines[i].length / colsDefault) + 1);
}
if (linesCount >= rowsDefault)
obj.rows = linesCount + 1;
else{
obj.rows = rowsDefault;}
}
var characterWidth = function (obj){
var characterWidth = 0;
var temp1 = 0;
var temp2 = 0;
var tempCols = obj.cols;
obj.cols = 1;
temp1 = obj.offsetWidth;
obj.cols = 2;
temp2 = obj.offsetWidth;
characterWidth = temp2 – temp1;
obj.cols = tempCols;
return characterWidth;
}
// Manipulations
this.style.width = “auto”;
this.style.height = “18px”;
this.style.overflow = “hidden”;
this.style.width = “70%”;
this.onkeyup = grow;
this.onfocus = grow;
this.onblur = grow;
growByRef(this);
});
};
June 6, 2012 at 7:52 am
Just a thought, why not position the button relative to the bottom of the container? (Make the container position relative and the submit button position absolute, located by bottom and left) – not tested it but might work
June 6, 2012 at 7:53 am
(having it in the middle of the text box a bit weird if the text box gets very big)
June 17, 2012 at 10:44 am
Autogrow textarea is exactly that my client wanted. Perfect, thank You!
June 18, 2012 at 12:38 pm
Hi thanks for making this, some questions though..
Can I set the initial width and height someway? Best would be in px in the css.. I want the box to look like a input field, so one row.. is this possible? How would you do this?
June 18, 2012 at 12:44 pm
Sorry, got it already >.<
For others, you can use some jquery after the .autoGrow().
$("#txtInput").css('width','500px');
June 24, 2012 at 5:59 am
great. it works but needed some width modification to have it tailored. thanks
June 25, 2012 at 5:00 pm
When I put the whole script at the end of my document just before the , it doesn’t work! when I have the script loaded on top of document, it works? what is the explanation? thanks
June 27, 2012 at 2:48 am
It was a great post. I really appreciate that. But how do i control the “textarea” element will grow only when the user had pressed combination key (SHIFT + Enter).
this is the code, but still not working :
$(document).ready(function() {
$(“.autogrow_textarea”).bind(‘keypress’, function(event) {
if( event.which === 13 && event.shiftKey ) {
alert(‘you pressed SHIFT+Enter on this textarea’);
$(“.autogrow_textarea”).autoGrow();
}
});
});
Thanks
July 30, 2012 at 7:42 am
Thanks, I will drink a beer in your honor
August 4, 2012 at 10:48 am
This doesn’t work properly. Keep pressing down the Enter key, and you will see the scrollbar with the scrollsize decreasing furiously. Only when you release the button does the scrollbar again disappears.
August 31, 2012 at 4:32 am
Hi,
Great pluggin.
Would be awesome if we didn’t have to set a cols on the textarea. Can it be set automatically?
My textareas are in percentage width (ie 95%) and change depending on window size.
Thanks for the help.
October 23, 2012 at 1:03 pm
I’m not sure why, but I kept getting an error from you file. It seems that somehow all the code was being interpreted as one line, so everything past the first comment was commented out.
Maybe it is an encoding issue?
This is weird, considering no one else seems to be having any problems. Anyway, I fixed the problem by running the code through http://jscompress.com/
Otherwise, thanks for the nice script.
October 31, 2012 at 2:04 am
This is what i was looking for, I just need to “Enter” key support, on enter key i want to post the data to next form.