全局 onBlur/onFocus

Question

和其他人一样，我们的网络应用程序中到处都有表单。

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

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

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

我知道在 css 中我们可以使用 :hover 之类的东西，但这并不能得到我们想要的东西。

我的猜测是，我们可以用 jQuery 做一些事情，它可以使用“FormThingy”类查看所有内容并将其更改为 onFocus 并返回 onBlur，我只是不确定从哪里开始。

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');
});

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