全球onBlur / onFocus

Question

我们和其他所有人一样，都在我们的网络应用程序中形成。

到目前为止，我们在大多数表单元素中都使用了以下（或某些变体）：

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

这是一种痛苦。 有没有一种简单的方法可以使用javascript / jQuery或CSS获得相同的结果？

我知道在css中我们可以使用以下内容：悬停，但这不会得到我们正在寻找的东西。

我的猜测是，我们可以使用jQuery查看所有内容，使用“FormThingy”类查看所有内容并将其更改为onFocus并返回到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');
});

您可能需要调整选择器以获得更好的性能。选择器应匹配您希望将焦点/模糊行为附加到的所有元素。