jQuery：.focus（）整个表单上的事件？如何？ [英] JQuery: .focus() event on whole form? How to?

问题描述

考虑下面的HTML：

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

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

我的想法是这样的：

$ $ $ $ $ $ $ $ $ $（form） .focus（函数（）{...}）;
$（form）。unfocus（function（）{...}）;

但似乎并不奏效。有任何想法吗？谢谢你的帮助！



$ b另外：
谢谢大家，有用。我使用了lonesomeday的解决方案，但是我的动画还有另外一个问题：
$ b $ $ $（'form'）。delegate（'：input '，'focus'，function（）{
$ b $（＃eintrag）。animate（{height：160px}，500）
$ ）.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）

}）。
$ b $（＃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）

}）;

这意味着我每次在窗体中改变焦点时都会获得动画。如何改变这个？

解决方案

嗯，我只是找到所有的输入元素， b
$ b

  $（function（）{
 $（'#form_id'）.find（'input'）。focus（function（）{ 
 $ b $ //你的函数
 $ b}）; 
 
 $（'#form_id'）.find（'input'）。blur（function ）{
 
 //你的函数
 
}）; 
 
}）; 
  

consider the following HTML:

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

Now I want to show a help section when the user is focused on ANY of the form elements. When the focus is gone the help information should too.

My idea was this:

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

But it doesn't seem to work. Any ideas? Thanks a lot for your help!

Tom

Addition: Thank you all a lot, it works. I used lonesomeday's solution, but there is another problem with my animations:

$('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)

});

This means that I get the animation each time I change focus within the form. How do I change this?

解决方案

Hmmm I would just find all the input elements and bind against them e.g.

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

        //your function

    });

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

        //your function

    });

});

这篇关于jQuery：.focus（）整个表单上的事件？如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！