Global onBlur/onFocus

Question

We have, like everyone else, forms all over our web app.

So far we've been using the following (or some variation) in most every form element:

class="formThingy"    
onFocus="document.theForm.theField.className='formThingySelected';" 
onBlur="document.theForm.theField.className='formThingy';"

It's a pain. Is there an easy way to do get the same result with either javascript/jQuery or CSS?

I know in css we can use things like :hover but that doesn't get what we're looking for.

My guess is that there is something we can do with jQuery that looks at everything with a class of 'FormThingy" and changes it onFocus and back onBlur, I'm just not sure where to start.

Answer 1

$('.formThingy').bind('focus blur', function() {
    $(this).toggleClass('formThingy formThingySelected');
});

Answer 2

Using jQuery you could accomplish the same thing with:

$('input').focus(function() {
    $(this).attr('class', 'formThingySelected');
}).blur(function() {
    $(this).attr('class', 'formThingy');
});

You might want to adjust the selector for better performance. The selector should match all elements you wish to attach the focus/blur behavior to.