Tutorial: Clearing the Textarea value onFocus

Quick tip that will always come in handy when creating forms. More often then not you will see a textarea that initially has some text in, something like… ‘Type your message here…’. On some websites, I have noticed that when you go to type in that same textarea you have to first remove the message before you start typing yours which I find very frustratings.

There is a simple line of code that will fix this and clear your message when they click on the textarea box. First you need to create your form, below I have included some sample form code:

[php]
<form name="test_form">
<dl>
<dt><label for="field_one">Field One</label></dt>
<dd><input type="text" name="field_one" value="" size="100" /></dd>

<dt><label for="field_two">Field Two</label></dt>
<dd><textarea name="field_two" rows="10" cols="100">Type your message here…</textarea></dd>
</dl>
</form>
[/php]

To make the text disappear on click we use the event handler onFocus which will basically run once the Textarea is in an ‘active’ state. We need to add in the following to our form:

[php]
onFocus="this.value=”; return false;"
[/php]

Add it inside the opening textarea tag so you will end up with a form looking like this….

[php]
<form name="test_form">
<dl>
<dt><label for="field_one">Field One</label></dt>
<dd><input type="text" name="field_one" value="" size="100" /></dd>

<dt><label for="field_two">Field Two</label></dt>
<dd><textarea name="field_two" rows="10" cols="100" onFocus="this.value=”; return false;">Type your message here…</textarea></dd>
</dl>
</form>
[/php]

Thats it done, nice and simple! You can download the source code for this below or view a demo here.