How to clear a textbox on GotFocus in a web-page ?

  • Thread starter Thread starter Radu
  • Start date Start date
R

Radu

Hi.

I have... well.... not very many computer-literate users to my web-
site.

For the textbox which expects an email address, for instance, I had to
enter a default text like
"Email..." because if not, they phoned me asking questions like "What
does the message 'Your email address is required' ?" :-)))

Now the problem is that many users don't erase this default text, and
enter their email address AFTER the default text, so that the contents
of the textbox is now
"(e-mail address removed)"

On this textbox,I have, of course, a RequiredFieldValidator, another
RequiredFieldValidator (with InitialValue="Email...") and a
RegularExpressionValidator (with the regex
ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-
\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$"

But this does not filter out the "Email... " text.

I *could* alter the ValidationExpression, of course, but I would want
a more elegant solution, one which would clear the default text out on
a textbox on GOTFOCUS, and conversely, put the default text back on
LOSTFOCUS, if, of course, the text in that text-box has not been
changed from the default - if the text HAS been changed, then,
obviously, it has to be left there.

So, for example, say that txtEmail has the default contents
"Email...". You click in it, the text disappears. You click away, it
becomes "Email..." again. You click in it again, it becomes null
again. You type "(e-mail address removed)" and you click away, the text stays
"(e-mail address removed)".

I'm sure that this requires some JavaScript, but.... I don't know
enough JavaScript for this, unfortunately. Could you please direct me
to such a piece of code ?

Thank you very much.
Alex.
 
It is done with JavaScript. You have an onFocus event handler you can add to
the tag. Send it to a routine that clears the value of the object.

onFocus="JavaScript:clearControl(this);"

which fires an event like:

function clearControl(cntrl)
{
cntrl.Value = "";
}

I wrote the above on the fly, so it might not be properly formatted, but it
gives the basic idea. If you want to put Email back if they hover off
without filling it in, you can use the onBlur event.

onBlur="JavaScript:ResetControl(this, 'Email');"

function ResetControl(cntrl, message)
{
if(cntrl.Value == '')
{
cntrl.Value = message;
}
}

Once conquered, the above is highly configurable

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA
http://gregorybeamer.spaces.live.com
Co-author: Microsoft Expression Web Bible (upcoming)

************************************************
Think outside the box!
************************************************
 
Back
Top