the magic growing text box

Here’s a text box that grows as you type to hold just the right amount of text:

<textarea name="foo" rows="1" cols="20" onkeypress="resizeme(this);"></textarea>

<script type="text/javascript" charset="utf-8">
// <![CDATA[
function resizeme(t) {
	var characterCount = t.value.length;

	// assuming proportional font
	var columnCount = Math.floor(t.cols * 1.25);
	var height = t.rows;
	var newHeight = 1 + Math.floor(characterCount/columnCount);

	if (newHeight != height) {
		t.rows = newHeight;
	}
}
// ]]>
</script>

Here it is in action:

Join the Conversation

1 Comment

  1. That’s pretty cool! Only it couldn’t quite keep up with my typing. Don’t know if that’s the script’s fault or my computer. Though a dual 1.83 Intel iMac, you’d think, would have enough power to manage it.

Leave a comment

Your email address will not be published. Required fields are marked *