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

[Alex]

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
"Email...my****@myISP.com"

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 "mm*@mmm.com" and you click away, the text stays
"mm*@mmm.com".

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.

[Benjamin Sattler]

Hi!

Well, I just have my social minutes :-)

<input type="text" name="useremail" value="Email..." size="20"
onfocus="if ( this.value == this.defaultValue ) this.value = ''"
onblur="if ( this.value == '' ) this.value = this.defaultValue" />

I assume you are using xhtml in that example. If you use html
instead then you should drop the / at the end. If you plan to
change the value which is written in the field by default you just
need to change the "value" attribute; the javascript will adapt
automatically.

Also, feel free to modify the size of the textbox by adjusting the
"size" attribute (which holds the number of visible characters in
the field)

This example does not filter its input in any way, so you need to
make that sure. But your regexp will do that :-)

bye
Alex <cu*************@yahoo.comwrote:

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
"Email...my****@myISP.com"

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-z
A-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 "mm*@mmm.com" and you click away,
the text stays "mm*@mmm.com".

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.