JQuery switch focus / blur

Question

How can I switch a CSS element to focus / blur using jQuery?

$('.answerSpace').bind('blur', function(){ $('.normProf').toggleClass('opacProf'); }); $('.answerSpace').bind('focus', function(){ $('.opacProf').toggleClass('normProf'); }); 

So now I have it. But it doesn’t quite work ...

Answer 1

Try

 $('.answerSpace').bind('blur', function(){ $('.normProf').removeClass("normProf").addClass('opacProf'); }); $('.answerSpace').bind('focus', function(){ $('.opacProf').removeClass("opacProf").addClass('normProf'); }); 

Answer 2

Check this out, this is exactly how y'all should switch jQuery focus.

The main use case:

 $('element').on('focus blur', toggleFocus); function toggleFocus(e){ if( e.type == 'focusin' ) // do something on focus else // do something else on blur } 

Answer 3

Well, if I get you right, you can use onblur and onfocus events, and toggleClass :

 $('#yourelement').bind('blur', function(){ $(this).toggleClass('your-class'); }); $('#yourelement').bind('focus', function(){ $(this).toggleClass('your-class'); }); 

Answer 4

Blur only activates when you leave the input, so you can use it to remove focus again.

 $('input').focus(function(){ $(this).css('box-shadow', '0px 0px 1px #ccc'); }); $('input').blur(function(){ $(this).css('box-shadow', 'none'); });