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.

Simon Arnold · Accepted Answer · 2011-09-05 19:20:50Z

5

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/

answered Sep 5, 2011 at 19:20

Simon Arnold

16.2k8 gold badges70 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Viktors Over a year ago

unfortinatelly I use this to fieldset and 'focus' , 'blur' do not work in my case, with click all OK! so wiil be cool if someone can help with click idea!

Daniel A. White · Accepted Answer · 2011-09-05 19:13:18Z

2

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

answered Sep 5, 2011 at 19:13

Daniel A. White

192k49 gold badges389 silver badges474 bronze badges

Comments

Mark Amery · Accepted Answer · 2018-11-13 23:43:08Z

0

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

edited Nov 13, 2018 at 23:43

Mark Amery

158k93 gold badges435 silver badges476 bronze badges

answered Oct 18, 2012 at 2:42

Hawkee

2,01723 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related