jquery - Detecting form focus and blur (multiple inputs) -

i've searched around , haven't found solution anywhere. here's situation.

i have signup form multiple inputs within form tag. how can detect when focuses on form , clicks off form? note* different individual input focus/blurring. in case, want treat form whole, meaning, blur state not activated when switching between various input fields within form itself.

can done? application needs detect user focusing on form, sliding down signuphelper. when user clicks outside form, signuphelper slidesup.

$("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 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> 

any appreciated! thanks, mark anderson

try out fiddle. key watching right events. basic example of functionality.

$('form').live('focus click', function(e){     $('#signuphelper').show();     e.stoppropagation(); // stop prop doesnt reach body });  $('form :input:last').blur(function(){  // blur of last input in form     $('#signuphelper').hide(); });   $('body').live('click', function(){ // if event reaches body hide helper     $('#signuphelper').hide();       });