さまざまなイベントに異なるスタイルを適用していますか？

Question

<input type="text" class="home" value="google.com" onblur="if(this.value=='') 
{this.value='google.com'}" onfocus="if(this.value=='google.com'){this.value=''}" /> 

これは私のinputです。それは2つのイベントonblurとonfocusを持っています。私は、さまざまなイベントに異なるスタイルルールを適用したいと考えています。たとえば、の場合はstyle="color:black;"、onblurの場合はstyle="color:red;"です。

これはどのようにして達成できますか？

Answer 1

私は純粋なCSSソリューションを提案します。これははるかに簡単で清潔です！

HTML

<input type="text" class="home" value="google.com" /> 

CSS

.home:focus { 
    color:red; 
} 

コントロールがフォーカスを失ったら、それが自動的に元の状態だに戻ります。または、私が言うように、自動的に。

ここにはa working fiddleです。

追加情報

はThe dynamic pseudo-classes: :hover, :active, and :focus

Answer 2

<input type="text" class="home" value="google.com" 
     onblur="if(this.value==''){this.value='google.com'; this.style.color = 'red'}" 
     onfocus="if(this.value=='google.com'){this.value=''; this.style.color = 'black'}" /> 

を参照してくださいしかし、私はジェームズ・ヒルのソリューションをお勧めします。

Answer 3

Javascriptを使用する必要はありません。 CSSには、入力フィールドに使用できるフォーカス擬似クラスがあります。

input.home { color: black } 
input.home:focus { color: red } 

"onblur"状態は、デフォルトの入力クラスセレクタになります。