使用jQuery从表单元素添加和/或删除类

Question

我需要一个jQuery脚本，当用户专注于表单元素时将添加一个类，当用户离开表单元素时，该类将被删除。

$("#search_text").click(function() {
    $(this).removeClass('search').addClass('search_active');
    $('#search_icon').removeClass('search_icon').addClass('search_icon_active');
});

此脚本添加了类，但在用户左侧元素时不会删除它。

Answer 1

正如Daniel A. White所说，你应该使用.focus和.blur

$("#search_text").focus(function() {
    $(this).removeClass('search').addClass('search_active');
    $('#search_icon').removeClass('search_icon').addClass('search_icon_active');
});

$("#search_text").blur(function() {
    $(this).removeClass('search_active').addClass('search');
    $('#search_icon').removeClass('search_icon_active').addClass('search_icon');
});

有关以下方面的更多信息： 重点：http://api.jquery.com/focus/ 模糊：http://api.jquery.com/blur/

Answer 2

查看.focus和.blur jquery事件。

Answer 3

如果你不介意排除IE 6和7，你可以使用：focus CSS event。

input { background-color: #F7F7F7; }
input:focus { background-color: #FFFFFF; }