全局onBlur/onFocus

Question

像其他人一样，我们的web应用程序中到处都是表单。

到目前为止，我们在几乎每个表单元素中都使用了以下内容(或一些变体)：

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

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

我知道在css中我们可以使用这样的东西:hover，但这并没有得到我们想要的东西。

我的猜测是，我们可以用jQuery来做一些事情，用一个“FormThingy”类来查看所有的东西，并将其改为onFocus和back 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');
});

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