onclick text box?
 

Hopefully this is the correct place to post this, so here ya go. I'm learning HTML and just had a few questions. I was using some tutorials from w3schools.com, and I came across Event Attributes. So I have this textbox, and I want it, when clicked, to clear the the text box of it's value, and change the text color to black (as in the actual text box, not the whole screen). Then when you click out of the text box, I want it to change the text color back to grey and have the value of the text box be 'Email' again. Here's the code:

<form>

<input type="text" value="Email" name="Email"

style="color:grey;text-align:left;background:white">

</form>

I realize this must use DHTML, but I am unable to find a good source to help me with this problem. Thanks!

Re: onclick text box?
 

You have to write a handlers for onfocus and onblur events for this textbox like this:

<form>

<input type="text" value="Email" name="Email" style="color:grey;text-align:left;background:white" onfocus='changeTextColor(this, 1)' onblur='changeTextColor(this, 0)'>

</form>

And your handlers will look like this:

function changeTextColor(tBox, c) {

      if(c==1) { //textbox on focus

               tBox.style.color = "black";

      } else { //textbox out of focus

               tBox.style.color = "grey";

      }

}

Re: onclick text box?
 

You may also try this to skip the coding...

<form action="#" onsubmit="return false;">

<input type="text" value="Email" name="Email"

style="color:grey;text-align:left;background:white"

onfocus="this.style.color = '#000';"

onblur="this.style.color = '#aaa';" />

</form>

Re: onclick text box?
 

thanks! it worked fine, but how would I have it clear the value of the textbox when clicked?

Re: onclick text box?
 

You may also apply this with onfocus event...

<input type="text" value="Enter Some Text!" size="30" onclick="this.value='';" />

Re: onclick text box?
 

Now ask us how to hide the text box when clicked. :icon_lol:

Re: onclick text box?
 

um...ok.
how do you hide the textbox when clicked? :icon_wink:

Re: onclick text box?
 

so I have these two chunks of code:

<form action="#" onsubmit="return false;">

<input type="text" value="Email" name="Email"

style="color:grey;text-align:left;background:white"

onfocus="this.style.color = '#000';"

onblur="this.style.color = '#aaa';" />

</form>

&

<input type="text" value="Enter Some Text!" size="30" onclick="this.value='';" />

How would I combine the two?

Re: onclick text box?
 

Break the code by using (;), and your code should be like this -->

<form action="*" onsubmit="return false;" name="myForm">

<input type="text" name="myText" value="Enter some text!" onclick="this.value='';this.style.visibility='hidden';" size="30" />&nbsp;

<input type="button" name="myButton" value="Show Me!" onclick="document.myForm.myText.style.visibility='visible';" />

</form>

Hope it clear's you up! Enjoy...