Auto-Growing Textarea Demo

This script requires jQuery 1.2.2.

Type below and the textarea will shrink/grow just as it does on Facebook. View Source to acquire the appropriate CSS styles.

Download jquery.autogrow-1.2.2.zip

min-height of 84px
No min-height, max-height of 100
min-height of 100px, prefilled

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ante nulla, ornare sit amet, dignissim eget, vulputate vitae, dui. Cras nisl libero, accumsan quis, consequat nec, nonummy sit amet, massa. Nunc sollicitudin nunc ac nibh. Integer aliquam. Aliquam erat volutpat. Ut massa dui, mollis vitae, luctus et, mattis in, mauris. Sed commodo. Proin nec nibh eget purus tristique auctor. Proin condimentum enim a mi. Fusce est tortor, rhoncus vel, viverra rhoncus, semper eu, odio. Integer vitae augue. Aliquam accumsan elit sed neque.

Maecenas felis lorem, eleifend feugiat, rhoncus eu, sagittis quis, nisi. Vivamus dui justo, ultricies quis, gravida a, imperdiet ut, nisl. Proin lacus. Nulla nec nisi. Vivamus dapibus libero non pede. Phasellus vestibulum iaculis mauris. Nam nisi nibh, hendrerit eu, volutpat a, commodo id, nulla. Suspendisse vestibulum. Mauris porttitor tempor dui. Integer ut pede sed lorem dapibus luctus. Donec fringilla, ante vitae ultricies eleifend, pede massa semper quam, at congue lorem elit non orci. Mauris pretium sollicitudin pede. Etiam elit lacus, suscipit at, ullamcorper non, mollis eu, mauris.

Optional Textarea CSS Attributes

line-height
min-height
max-height

-- OR --

You can apply the attributes (optional) using jQuery, which is the best option if you want to apply the same attributes to multiple textareas:

$(document).ready (function() {
	
	$('textarea.expanding').autogrow({
		maxHeight: 100,
		minHeight: 30,
		lineHeight: 16
	});
							
});

Note: If your textarea gets deselected or acts funny, it is fixed in jQuery 1.2.2. The latest version can always be downloaded from here: http://code.jquery.com/jquery-latest.js