Welcome to WebmasterWorld Guest from 54.160.254.203

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)

New User

10+ Year Member

joined:Jan 20, 2005
posts:7
votes: 0


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)

Full Member

10+ Year Member

joined:Mar 7, 2003
posts:272
votes: 0


hi

ill give this a go.

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

var clickedIt = false;

function clearTextArea(id){
if (clickedIt == false){
id.value="";
clickedIt=true;
}
}

should work i think.

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

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


<textarea name="whatever" rows="6" cols="27" onFocus="this.value=''; return false;">blah blah blah...</textarea>
5:31 pm on Feb 8, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


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)

New User

10+ Year Member

joined:Jan 20, 2005
posts:7
votes: 0


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)

New User

10+ Year Member

joined:Jan 20, 2005
posts:7
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members