javascriptフォームの異なるクラス（textcolor）

Question

次のjavascriptフォームでは、2つの異なるテキストカラー（CSSクラスを使用して）を設定できないという問題があります。標準クラスは灰色（灰色のテキストカラー）ですが、一度「あなたのメールをここに入力」をクリックすると、入力する電子メールのカラーテキストが黒くなります。 （クラス黒）。誰かが私を助けることができますか？

<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で簡単になんとかですhttp://www.jsfiddle.net/dduncan/hdtvr/

Answer 2

こちらを参照してください

className 

です：

を

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

私は、すなわち< 8は疑似クラス:focusをサポートしていないと思いますが。

Answer 3

（ID = "idElement"）を自分の入力にIDを与え、代わりに

：document.mainform.email.class = "黒"。

試してみてください。

のdocument.getElementById（ "idElement"）のsetAttribute（ "クラス"、 "クラス名"）;

する必要があります。