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

您甚至不需要为此使用Javascript。 CSS有一个焦点伪类，可以用于输入字段。

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

“onblur”状态只是成为默认的输入类选择器。

Answer 3

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

但是，我会推荐James Hill的解决方案。

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

3 个答案: