jquery - 如何使输入字段在活动时更改其设计？

Question

假设我的背景颜色是红色。我希望输入文本字段显示为红色，但是当您在输入字段内单击以键入时，它会变成一个规则文本字段。当然，当您在输入字段中不活动时，它应该恢复到原始状态（红色）。

它实际上是你经常看到的东西。我想过使用toggleclass？

我的输入字段都附加了 jQuery

提前致谢

Answer 1

试试 CSS3 中的新伪类，这里的 :focus 选择器...

http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act

CSS 示例：

textarea:focus, input:focus {  
    background:#f00;  
    border:3px solid #0f0;  
} 

希望有帮助，-fs

Answer 2

尝试这个：

$('input').bind('focusin focusout', function() {
    $(this).toggleClass('red');
});

我在这里创建了一个示例：http: //jsfiddle.net/FBPaA/

它适用于 Chrome、Firefox 和 IE

Answer 3

您可以使用 acss class或 style 属性来做到这一点。

CSS：

.red {
    background-color: red;
}

js：

$(function() {
    $('input').bind('focusin', function() {
       $(this).removeClass('red');
    }).bind('focusout', function() {
       $(this).addClass('red');
    }).trigger('focusout');
});     

例子：

http://www.jsfiddle.net/NdyGJ/