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.

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.

• javascript
• jquery

3 Answers 3

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./focus/ Blur: http://api.jquery./blur/

Have a look at the .focus and .blur jquery events.

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; }