在不同的事件上應用不同的樣式？

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;"對於onfocus和style="color:red;"對於onblur。

我該如何做到這一點？

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」狀態只是成爲默認的輸入類選擇器。