Глобальный onBlur / onFocus

Question

У нас, как и у всех, есть формы по всему нашему веб-приложению.

До сих пор мы использовали следующие (или некоторые варианты) в большинстве элементов формы:

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

Это боль. Есть ли простой способ получить тот же результат с помощью javascript / jQuery или CSS?

Я знаю, что в css мы можем использовать такие вещи, как: hover, но это не дает того, что мы ищем.

Я предполагаю, что есть кое-что, что мы можем сделать с jQuery, который просматривает все с помощью класса FormThingy и изменяет его на Focus и обратно на Blur, я просто не уверен, с чего начать.

Answer 1

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

Answer 2

Используя jQuery, вы можете сделать то же самое с:

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

Возможно, вы захотите настроить селектор для повышения производительности. Селектор должен соответствовать всем элементам, к которым вы хотите прикрепить фокус / размытие.