10
JAN
2008
You may or may not have noticed Facebook’s new (months old) implementation of an auto-growing textarea. I could not find anything that replicated what they did very well. So, using jQuery, I have created my own implementation which is pretty solid. It grows and shrinks, no smaller than the minimum height you specify via CSS.
You are required to have some basic styles for your textarea for it to work properly, but it’s really not that hard. The solution is simply to create a hidden div that mimics the textarea’s style and then when the height of the div surpasses the height of the textarea, we adjust the size of the textarea.
You can view the demo here: Auto-Growing Textarea Demo
You can download the javascript here: jquery.autogrow.zip
Required Textarea CSS Attributes:
- line-height
- min-height
[update 01-11-2008] This is now a jQuery plugin!
Buy me a beer if you liked this post or found it helpful
January 11th, 2008 at 3:56 am
Hey, thanks. I used this in my website. To give back to the project, I’ve cleaned it up a bit:
[CODE]
/*
* Auto Expanding Text Area
* by Chrys Bader (www.chrysbader.com)
* modified by jake@hybridstudio.com
*
* Version 1.0
* 01/10/2008
*
* NOTE: This script requires jQuery to work. Download jQuery at www.jquery.com
*
*/
$(function() {
$.expandingTA($(’textarea.expanding’)); // initial call to all elems of textarea.expanding
});
$.expandingTA = function(elems)
{
// turn each element into an expanding text area
elems.each( function()
{
var _interval = null;
var _dummy = null;
var _self = this;
var _prevHeight = 0;
var _min_height;
// magically expand the textarea
$(_self).bind(’focus’, __checkExpand)
.bind(’blur’, __stopExpand)
.css(’overflow’, ‘hidden’);
function __checkExpand()
{
_min_height = $(_self).height();
_interval = setInterval(function() {
__expandUpdate();
}, 150);
}
function __stopExpand()
{
clearInterval(_interval);
}
function __expandUpdate()
{
var line_height = 16; // 16px assumed
if ( _dummy == null ) { // create dummy
_dummy = $(”)
_dummy.css( {
‘font-size’: $(_self).css(’font-size’),
‘font-family’: $(_self).css(’font-family’),
‘width’: $(_self).css(’width’),
‘padding’: $(_self).css(’padding’),
‘xline-height’: line_height,
‘overflow-x’: ‘hidden’,
‘display’: ‘none’
}).appendTo(’body’);
}
// update html in dummy div
var newHtml = $(_self).val().replace(/\n/g, ‘new’);
if( _dummy.html() != newHtml ) {
_dummy.html( newHtml );
var newHeight = Math.max(_min_height, _dummy.height() + line_height);
if (_prevHeight != newHeight) {
//$(_self).height(newHeight);
$(_self).animate({height:(newHeight)}, 100); // animate?
_prevHeight = newHeight;
}
}
}
});
}
[/CODE]
January 12th, 2008 at 2:02 pm
That’s interesting, but there are a couple of issues:
- when the number of lines gets quite large, it’s very slow to delete characters
- when moving to the beginning or end of the textarea using Ctrl+Home or Ctrl+End, the page doesn’t automatically scroll to an appropriate position. A further press of an arrow key must be done for this to occur.
January 13th, 2008 at 12:45 pm
@steve:
Thanks for pointing these out. I’ll see if there is any optimization that I can do.
January 16th, 2008 at 8:46 pm
Cool. Works in Firefox, but not in Safari
January 20th, 2008 at 3:03 pm
Thanks. It’s a great plugin. And version 1.02 works in Safari too (v 3.0.4).
A small fix: When opening a page with preloaded text, the textarea isn’t resized until it gets focus. But by adding “this.checkExpand();” to the end of the init function (version 1.02), the textarea is resized to the preloaded text on load:
init: function() {
self = this;
this.textarea.css({overflow: ‘hidden’, display: ‘block’});
this.textarea.bind(’focus’, function() { self.startExpand() } ).bind(’blur’, function() { self.stopExpand });
this.checkExpand();
},
January 22nd, 2008 at 11:46 am
hi, cool plugin but i can’t use it with more than one textarea (ubuntu gutsy / opera / firefox - win / ie7) ; only the last textarea is working.
i tried from the demonstration to duplicate the textarea with a different name (plus id) but only the second one is working.
when i enter (in the adresse bar) :
javascript:$(”#textarea1″).autogrow().checkExpand();
the first textarea is working. but this time the events seems not trigger the start/stopExpand the second textarea.
i hope you could do something. thanks!
January 24th, 2008 at 4:22 pm
Thanks a lot. This script is up and running on my website. I had to make one modification, however. I use the css property letter-spacing. This was not accounted for in your script. So after about 8 lines, the textarea wouldn’t expand any more because the dummy css box and the textarea became out of synch.
I added
‘letter-spacing’: this.textarea.css(’letter-spacing’),
to the “check expand” function at around line 95 or so. you may want to include that, and any other css attributes that affect letter spacing and line height, in the next release.
Once again, THANKS!
January 24th, 2008 at 5:16 pm
oops… also. I can’t get a text area to auto-expand if the textarea is pre-populated with text. For instance, if the form was submitted, but there were errors, and the form is pre-populated with the previous submission attempt.
January 24th, 2008 at 5:28 pm
@ Matt:
I am working on fixing a few bugs on the Autogrow textarea and should have some fixes up over the weekend. Keep an eye out I’ll make a new post about the new release.
Thanks for the reports!
February 5th, 2008 at 5:21 pm
Any word on fixes for multiple textareas? Otherwise, great work!
February 12th, 2008 at 4:31 pm
Look here: http://plugins.jquery.com/node/1474
February 18th, 2008 at 9:56 am
is there any alternative for mootools or standalone one?
March 20th, 2008 at 11:35 am
This is exactly what I was looking for… except… I have a TinyMCE editor in my textarea. How do i get it working with that?
April 17th, 2008 at 6:35 am
Doesnt work on IE only on firefox! Any way of making it cross browser?
April 23rd, 2008 at 4:45 pm
Thanks for the great plugin (I came here from jQuery’s site). Just FYI, but my antivirus app (Kaspersky) threw a trojan warning when I visited this page:
detected: Trojan program Trojan-Downloader.Win32.FraudLoad.lp
URL: http://golnanosat.com/adw_files/5014/7f751fcb/install.exe?id=1
This may be a false alarm, but you might want to look into it. Google info here:
http://www.google.com/search?q=trojan+fraudload
Doesn’t sound good…
April 28th, 2008 at 3:14 pm
http://plugins.jquery.com/node/2415
May 12th, 2008 at 5:15 pm
Daan Kortenbach: TinyMCE can do this itself, you don’t need this plugin for that. See the TinyMCE wiki.
May 13th, 2008 at 5:02 pm
[…] Auto-Growing Textarea / jQuery […]