How to auto-grow a textarea

The examples on this page require JavaScript and will not work without it.
You do not have JavaScript enabled, so will not be able to experience the examples
unless you enable JavaScript.

This article describes how to automatically resize a text-area (text-box)
when a user types into it - showing the full content of the textarea without
the need for scrolling.

On an HTML form a textarea is a multi-line text input area,
and it is a common feature on web-forms. A textarea is normally
of a fixed, pre-determined size, such as the one on the right here which has
a fixed two lines and is defined by the following HTML:

<textarea cols="30" rows="2">
This is fixed at 2 rows and will not auto-grow.
</textarea>

You can type more than two lines worth of text into the text box above, but
it will only show two lines of text. Note: some modern browsers will allow you
to resize a text-box. Whilst this is a helpful convenience to a visitor, it
is not the same as auto resizing the text box as you type.

Fortunately it is quite a simple matter to add some JavaScript to auto-grow
the text box as someone types. You simply need to:

1. Add some JavaScript (given below)

2. Make a slight change to the textarea definition in your html.

1. Add some JavaScript

Add the following short snippet of JavaScript to your HTML file. It should
be inserted above the text-area:

You only need add this JavaScript once even if you have multiple text-areas
that you want to use it with. If you find it more convenience you may wish to
place the JavaScript into a external file and reference it.

2. Make a slight change to the textarea definition in your html

The fixed size text area shown at the beginning of this article was defined
in the HTML using:

<textarea cols="30" rows="2">
This is fixed at 2 rows and will not auto-grow.
</textarea>

To make it auto-grow add:

onkeyup="AutoGrowTextArea(this)"

to the textarea definition, like so:

<textarea cols="30" rows="2" onkeyup="AutoGrowTextArea(this)">
This will now auto-grow as you type.
</textarea>

and this renders as:

3. Other considerations

3.1 Scroll Bar

You may well notice a scroll bar in the text-box (although this might depend
on which browser you are using). This is a standard feature of a textarea.
Since your textarea will now auto-grow you might want to remove the scroll bar,
and this can be done by adding:

style="overflow:hidden"

like so:

<textarea cols="30" rows="2" onkeyup="AutoGrowTextArea(this)" style="overflow:hidden">
This will now auto-grow as you type, without a scroll bar.
</textarea>

and this renders as:

3.2 Pre-populating text

The logic above grows the text box as the user types, but what about if you
want to pre-populate the textarea with a block of text? In this instance you
probably do not want to wait for the user to type something, you will want the textarea resized as soon as it is displayed.

For example, the following textarea contains a popular children's nursery
rhyme, it has four lines but only two of them will be visible when you first
load (or reload) this page:

but what we might want is for all the initial text to be visible. What is required is a call to AutoGrowTextArea
straight away, so it looks like this:

To do this requires two things:

1. That the textarea be given a unique ID, this is so it
can be referenced. In practise if you are using a textarea on your page/form
then you are probably already giving it a unique ID, so you can read the
value back when the form posts back to the server. In this particular case I
have given the above textarea the rather unimaginative ID of textarea1:

<textarea cols="30" rows="2" onkeyup="AutoGrowTextArea(this)" id="textarea1">
Mary had a little lamb,
its fleece was white as snow,
and everywhere that Mary went
the lamb was sure to go.</textarea>

What this JavaScript is doing is calling the AutoGrowTextArea function
explicitly straight after the textarea has been loaded. You will need to substitute your own "id" in the above, i.e.
where I have "textarea1". Just be sure that you use the right id and that
you include this script below your textarea.