Различный класс (textcolor) в форме javascript

Question

У меня проблема в том, что я не могу установить два разных цвета текста (с помощью классов CSS) в следующей форме javascript. Стандартный класс - серый (серый цвет текста), но после того, как кто-то нажмет кнопку «Введите свою почту», текст для ввода текста должен быть черным. (класс черный). Кто-нибудь может мне помочь?

<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 классы

.grey {
    color: grey;
}

.black {
    color: black;
}

Answer 1

Это легко выполнимо в чистом CSS. Нет необходимости в javascript:

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

Хотя я думаю, что <8 не поддерживает псевдокласс <code>:focus.

Answer 2

Атрибут, который вы хотите изменить:

className

Смотрите здесь http://www.jsfiddle.net/dduncan/hdtvr/

Answer 3

Дайте идентификатор для вашего ввода (id = "idElement") и

вместо: document.mainform.email.class = "black";

попробовать:

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

Должен это сделать.