Different class (textcolor) in javascript form

I have the problem that I can't set two different text colors (via css classes) in the following javascript form. The standard class is grey (grey text color), but once someone clicks on "Type your mail here" the email color text to type in, should be black. (class black). Someone can help me?

<form name="mainform"开发者_运维技巧 method="post">
     Your email: <input type="text" size="40" class="grey" name="email" value="{{ fields.email.input }}" onclick="ClearIfAppropriate();">{{ fields.email.error }} &nbsp; <input type="submit" name="submit" value="Go">
</form>
<script type="text/javascript" language="JavaScript"><!--
    var LabelText = "Type your email here";
    if(document.mainform.email.value.length == 0) {
        document.mainform.email.value = LabelText;
    }
    function ClearIfAppropriate() {
        if(document.mainform.email.value == LabelText) {
            document.mainform.email.value = "";
            document.mainform.email.class = "black";
        }
    }
//--></script>

CSS Classes

.grey {
    color: grey;
}

.black {
    color: black;
}

---

This is easily doable in pure CSS No javascript is necessary:

input.grey:focus
{
   color: #000;
}

Although I think ie<8 doesn't support the pseudo-class :focus.

---

The attribute you want to change is

className

See here http://www.jsfiddle.net/dduncan/hdtvr/

---

Give an id to your input (id="idElement") and

instead of: document.mainform.email.class = "black";

try:

document.getElementById("idElement").setAttribute("class", "className");

Should do it.