TextArea Sizer | JavaScriptSource

TextArea Sizer

Paul Tuckey Mar 12, 2007


You no longer need to provide large textareas in your forms. This script will resize textarea boxes to fit the text in them.

Click here to try it out!


To make a textarea none-resizeable, just add the following to the textarea element: onkeyup="";, e.g.,
<textarea cols="40" rows="2" name="reason3" onkeyup="">Add more text to see it expand!</textarea>

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: textArea Sizer.js


Paste this code into the HEAD section of your HTML document.


Paste this code into the BODY section of your HTML document

Leave a Response


Change the textarea input setting:[br /][br /]<textarea cols="40" rows="1" name="reason">Add more text to see it expand!</textarea>[br /][br /]Otherwise, it is probably an error in the CSS settings.

Lee Nov 6, 2008

I have installed this javascript into my form I am creating and notice the default text size box is approximately 3 lines tall.[br /][br /]How can I change this so it is initially only one line tall?[br /][br /]Thanks,[br /][br /]Paul

Paul Oct 11, 2008

How about adding a couple more functions like a calculator that processes equations inside the text box and/or has running word/character count and/or countdown for n word and/or n character limits?

Gordon Murray Sep 24, 2008

Great piece of code! Just what I've been looking for. Cheers! NicMason.com - Yarraville.com.au

NicMason.com Jul 23, 2008

In order to better help you, you'll need to post your question [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]over on the forums[/a].

Lee Jun 26, 2008