Here’s some code I’m going to use on every project from now on. It makes all the textarea fields in your forms resize dynamically as the user types. Drop it unobtrusively into any page (running jQuery) and all your textareas expand to fit the text the user has entered.
Here’s the code:
/*
* Scale all textareas dynamically on the page
* Requires jQuery
*/
function scaleTextareas() {
$('textarea').each(function(i, t){
var m = 0;
$($(t).val().split("\n")).each(function(i, s){
m += (s.length/(t.offsetWidth/10)) + 1;
});
t.style.height = Math.floor(m + 8) + 'em';
});
setTimeout(scaleTextareas, 1000);
};
$(document).ready(function(){
scaleTextareas();
});
I’ve tested it in FF3, Safari, and it even works in IE6 and IE7 (after some refactoring).