How to auto-grow a textarea
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:
<script type="text/javascript">
// Auto-Grow-TextArea script.
// Script copyright (C) 2011 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function AutoGrowTextArea(textField)
{
if (textField.clientHeight < textField.scrollHeight)
{
textField.style.height = textField.scrollHeight + "px";
if (textField.clientHeight < textField.scrollHeight)
{
textField.style.height =
(textField.scrollHeight * 2 - textField.clientHeight) + "px";
}
}
}
</script>
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>
2. A small snippet of JavaScript straight after the text area:
<script type="text/javascript">
AutoGrowTextArea(document.getElementById("textarea1"));
</script>
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.