检测形式聚焦和模糊（多重输入）

Question

我周围中搜索，并没有发现一个解决方案的任何地方。这是情况。

我与所有形式的标签中的多个输入的注册表单。我怎么能检测到有人专注于表单并点击表单？注*这与个别输入焦点/模糊不同。在这种情况下，我希望将表单视为一个整体，这意味着，在表单本身内的各个输入字段之间切换时，模糊状态将不会被激活。

可以这样做吗？我的应用程序需要检测用户关注表单，然后滑下注册帮助器。当用户在表单外单击时，signupHelper滑过。

$("document").ready(function() { 

/* DETECT FORM USE */ 

$('#signupForm form').live("focus", function(event) { 
    if($('#signupHelper').is(":visible") == false) $('#signupHelper').slideDown(); 
}); 

$('#signupForm form').live("blur", function(event) { 
    if($('#signupHelper').is(":visible")) $('#signupHelper').slideUp(); 
}); 

}）;

<div id="signupForm"> 

<form class="signupMe"> 
<table cellspacing="0px"> 
    <tr> 
     <td class="step">1</td> 
     <td class="content" valign="bottom"> 
      Choose your username 
      <input type="text" name="usernameAttempt"> 
    </td> 

    <tr><td colspan="2" class="vSpace"></td></tr> 

    <tr> 
     <td class="step">2</td> 
     <td class="content" valign="bottom"> 
      Email Address 
      <input type="text" name="usernameAttempt"> 
     </td> 
    </tr> 

    <tr><td colspan="2" class="vSpace"></td></tr> 

    <tr> 
     <td class="step">3</td> 
     <td class="content" valign="bottom"> 
      Password 
      <input type="password" name="usernameAttempt"> 
     </td> 
    </tr> 

    <tr><td colspan="2" class="vSpace"></td></tr> 

    <tr> 
     <td></td> 
     <td><img align="right" src="/img/signup/signup.jpg" /></td> 
    </tr> 

</tr><table> 
</form> 

</div> 

任何帮助将不胜感激！谢谢， 马克·安德森

Answer 1

尝试out this fiddle。关键是看所有正确的事件。这只是功能的一个基本示例。

$('form').live('focus click', function(e){ 
    $('#signuphelper').show(); 
    e.stopPropagation(); // stop prop so it doesnt reach body 
}); 

$('form :input:last').blur(function(){ // blur of last input in form 
    $('#signuphelper').hide(); 
}); 

$('body').live('click', function(){ // if the event reaches body hide helper 
    $('#signuphelper').hide();  
});