다른 이벤트에 다른 스타일을 적용하고 있습니까?

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입니다. 이벤트에는 onblur과 onfocus 두 가지가 있습니다. 다른 이벤트에 대해 다른 스타일 규칙을 적용하고 싶습니다. 예 : 의 경우 style="color:black;"이고 onblur의 경우 style="color:red;"의 경우

어떻게하면됩니까?

Answer 1

순수한 CSS 솔루션을 제안합니다. 훨씬 간단하고 훨씬 더 깨끗합니다.

.home:focus { 
    color:red; 
} 

컨트롤이 포커스를 잃을되면 HTML

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

CSS, 그것은 원래의 상태가 자동으로의에 반환합니다. 또는 내가 말하는 것처럼 자동적으로.

여기에 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

자바 스크립트를 사용할 필요조차 없습니다. CSS에는 입력 필드에 사용할 수있는 포커스 의사 클래스가 있습니다.

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

"onblur"상태가 기본 입력 클래스 선택기가됩니다.