0

I've got this small script to toggle happy face when focusing in the form:

/*  Happy face script */
$('#search').on('focusin', function() {
   $("#smile").removeClass("fa-meh-o");
   $("#smile").addClass("fa-smile-o");
});
$('#search').on('focusout', function() {
   $("#smile").removeClass("fa-smile-o");
   $("#smile").addClass("fa-meh-o");
});

However when I click 'submit' it goes back to the focusout state. How do I avoid it?

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
sdvnksv
  • 9,350
  • 18
  • 56
  • 108

1 Answers1

0

Remove the focusoutevent and use toggleClass() like,

$('#search').on('focusin', function() {
   $("#smile").toggleClass("fa-meh-o fa-smile-o");
});


$('#submit')on('click',function(){
   // your code then you can remove the classes again if not then remove below code
   $("#smile").toggleClass("fa-meh-o fa-smile-o");
});

Updated you can use focusin and focusout with same toggleClass like,

$('#search').on('focusin focusout', function() {
   $("#smile").toggleClass("fa-meh-o fa-smile-o");
});
Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • Yes, but when I focusout it won't change the class to fa-meh-o. I have to focus again to do that with this code. – sdvnksv Nov 14 '13 at 06:01