폼 포커스 및 블러 감지 (복수 입력)

Question

어디서나 솔루션을 검색해 보았습니다. 여기 상황이 있습니다.

양식 태그 내에 입력이 여러 개인 가입 양식이 있습니다. 누군가가 양식에 집중하고 양식을 클릭하면 어떻게 감지 할 수 있습니까? 참고 * 이것은 개별 입력 초점/흐림 효과와 다릅니다. 이 경우 폼 전체를 처리하려고합니다. 즉, 폼 내에서 다양한 입력 필드간에 전환 할 때 블러 상태가 활성화되지 않습니다.

이 작업을 수행 할 수 있습니까? 내 응용 프로그램은 양식에 중점을 둔 사용자를 감지 한 다음 signupHelper를 아래로 내려야합니다. 사용자가 양식 외부를 클릭하면 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();  
});