onclick text box?

[besktrap]

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!

[Luckychap]

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";
      }
}

[essential]

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>

[besktrap]

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

[essential]

You may also apply this with onfocus event...

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

[Luckychap]

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

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

[besktrap]

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

[besktrap]

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?

[essential]

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...