更改焦点上的文本颜色,并在焦点离开后保持该颜色(onblur)

时间:2013-02-07 15:28:45

标签: javascript css

CSS和Javascript问题。我希望备用行具有不同的颜色,默认文本为灰色。但是,一旦输入字段具有焦点,我希望新文本为黑色,然后在该字段不再具有焦点后保持黑色。以下是我到目前为止所做的事情:

input {
   font-family:Verdana, Trebuchet MS;
   font-size:11px;
   vertical-align:top;
}

input:focus {
    color: black;
}

input.odd {
   color: #888;
   background:#FFFFB4;
}

input.even {
   color: #888;
   background:#FFD9C8;
}

此代码实现了我对备用行的要求,使其具有不同的颜色,并且默认文本为灰色。但是,新文本是灰色的,而不是黑色。然后我如何让新文本保持黑色。

更新CSS

input {
   font-family:Verdana, Trebuchet MS;
   font-size:11px;
   vertical-align:top;
}

input.odd {
   color: #888;
   background:#FFFFB4;
}

input.even {
   color: #888;
   background:#FFD9C8;
}

input.odd:focus, input.even:focus, input.odd.hasText, input.even.hasText {
    color: black;
}

新jQuery代码

$('input').focus(function() {
   $(this).addClass('hasText');
});

1 个答案:

答案 0 :(得分:0)

很可能你想要

input.odd:focus,input.even:focus {
    color: black;
}

如果你的意思是文字在失去焦点后恢复为灰色,你可能需要在输入文本后通过javascript添加一个类,让该类与焦点类匹配。

修改

类似的东西:

$('input').focus(function(){
    $(this).addClass('hasText');
});

然后在你的CSS中有:

input.even:focus,input.odd:focus,input.hasText{
    color: black;
}