Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Clearing <textarea> upon first click

How do I clear a textarea in a form when a customer first clicks?



4:42 pm on Feb 8, 2005 (gmt 0)

10+ Year Member

I have a textarea in a form that has some brief instructions displayed within the area when it first loads, i.e.:

<textarea name="whatever" rows="6" cols="27">blah blah blah...</textarea>

and I want the "blah blah" to disappear when my customer clicks inside the textarea to write their message. But I only want it to happen the first time they click, so if they start writing their message, then stop and click somewhere else for a moment, then click back in the textarea to finish their message it won't erase what they've typed again.

How do I do this with javascript, or better, some other method? Thanks people.


4:56 pm on Feb 8, 2005 (gmt 0)

10+ Year Member


ill give this a go.

<textarea onfocus="clearTextArea(this);" >blah blah</textarea>

var clickedIt = false;

function clearTextArea(id){
if (clickedIt == false){

should work i think.


5:16 pm on Feb 8, 2005 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

<textarea name="whatever" rows="6" cols="27" onFocus="this.value=''; return false;">blah blah blah...</textarea>

Bernard Marx

5:31 pm on Feb 8, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I'll go with rocknbil on this one.
The user could reach the textarea by using the keyboard, so onFocus covers both angles.
However, it will clear again if focus is lost and regained, so I'll just add a little:

<textarea onFocus="this.value=''; this.onfocus=null;" name="whatever" rows="6" cols="27" >
blah blah blah...</textarea>


8:46 pm on Feb 8, 2005 (gmt 0)

10+ Year Member

Thanks, all. I will try both methods later this evening when I get home to my PC and I'll let you know...


4:15 am on Feb 9, 2005 (gmt 0)

10+ Year Member

Both the methods offered by natty and Bernard work the same. But after using them I think I need to add some more details about what I need.

First, I have multiple forms - with radio buttons and two textareas per form - on one page (don't ask why - it's more than I want to explain here).

Second, and more importantly, each form has a reset button to clear the form and start over. This clears the radio buttons and the textareas of any added text after the "blah blah".

Both solutions clear the textareas of the "blah blah" on the first click in a textarea, and allow the focus to leave the textarea and return without clearing on the second click. However, if the customer wants to start over and they push the reset button, the "blah blah" returns to the textareas that have been cleared and they can't be cleared again without refreshing the page.

What would be nice is have the javascript reset also when the reset button is pushed so that a textarea will only clear once after the page is loaded and once after each time the reset button is pushed.

Maybe this is asking too much, but hopefully not.


Featured Threads

Hot Threads This Week

Hot Threads This Month