JQuery：整个表单上的 .focus() 事件？怎样做？

Question

考虑以下 HTML：

<form ....>
   <textarea>....</textarea
   <input .... />
</form>

现在我想在用户关注任何表单元素时显示帮助部分。当焦点消失时，帮助信息也应该消失。

我的想法是这样的：

$("form").focus(function(){...});
$("form").unfocus(function(){...});

但这似乎行不通。有什么想法吗？非常感谢您的帮助！

汤姆

补充： 非常感谢大家，已经成功了。我使用了lonesomeday的解决方案，但是我的动画还有另一个问题：

$('form').delegate(':input', 'focus', function() {

    $("#eintrag").animate({"height": "160px"}, 500)
    $("#header").animate({"height": "200px"}, 500)
    $("#container").animate({"margin-top": "240px"}, 500)
    $(".show").animate({"opacity": "0"}, 500)
    $(".hide").animate({"opacity": "1"}, 500)
    $("#header_links>p").animate({"opacity": "0"}, 500)

}).delegate(':input', 'blur', function() {

    $("#eintrag").animate({"height": "20px"}, 500)
    $(".show").animate({"opacity": "1"}, 500)
    $("#container").animate({"margin-top": "150px"}, 500)
    $(".hide").animate({"opacity": "0"}, 500)
    $("#header_links>p").animate({"opacity": "1"}, 500)
    $("#header").animate({"height": "110px"}, 500)

});

这意味着每次在表单内更改焦点时我都会获得动画。我该如何改变这个？

Answer 1

嗯，我会找到所有输入元素并绑定它们，例如

$(function() {
    $( '#form_id' ).find('input').focus(function() {

        //your function

    });

  $( '#form_id' ).find('input').blur(function() {

        //your function

    });

});

Answer 2

尝试使用 $(":input") （注意冒号）

，焦点的相反事件是模糊，而不是取消焦点

Answer 3

问题：

1. focus 的反面是 模糊。 unfocus 取消绑定焦点处理程序。
2. 您绑定到表单元素，而它是表单内的元素（在 jQuery 中，可以通过 :input) 接收焦点。

最好的方法是使用 delegate：

$('form').delegate(':input', 'focus', function() {
    $('#help').show();
}).delegate(':input', 'blur', function() {
    $('#help').hide();
});

这是最快的方法处理这个。

查看 jsFiddle 示例。

Answer 4

请参阅 focus()。它不适合与“表单”元素一起使用，而是与输入、文本区域...等一起

使用

$("form input").focus(function(){...}).