Add and/or Remove Class from a form Element using jQuery

Question

I need a jQuery script that will add a class when the user is focused on the form element and when the user leaves the form element, the class is removed.

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

This script adds the class, but does not remove it when the user has the left the element.

Answer 1

As said by Daniel A. White, you should use .focus and .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');
});

For more information on: Focus: http://api.jquery.com/focus/ Blur: http://api.jquery.com/blur/

Answer 2

看一下.focus和.blur jQuery事件。

Answer 3

If you don't mind excluding IE 6 and 7 you can use the :focus CSS event.

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