CODEWITHSUNDEEP
javascriptjquery
Viktors
Viktors

Reputation: 935

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

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.

Upvotes: 0

Views: 7518

Answers (3)

Hawkee
Hawkee

Reputation: 2027

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

Upvotes: 0

Simon Arnold
Simon Arnold

Reputation: 16177

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/

Upvotes: 5

Daniel A. White
Daniel A. White

Reputation: 190943

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

Upvotes: 2

Related Questions