javascript - 在不同的事件上应用不同的样式？

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=''}" />

这是我的输入。它有两个事件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