Detecting form focus and blur (multiple inputs)
<p>I've searched around and haven't found a solution anywhere. Here's the situation.</p>

<p>I have a signup form with multiple inputs all within the form tag. How can I detect when someone focuses on the form and clicks off the form? Note* This is different than individual input focus/blurring. In this case, I want to treat the form as a whole, meaning, the blur state WILL NOT be activated when switching between various input fields within the form itself.</p>

<p>Can this be done? My application needs to detect the user focusing on a form, then sliding down a signupHelper. When the user clicks outside the form, the signupHelper slidesUp.</p>

<pre><code>$("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();
});
</code></pre>

<p>});</p>

<pre><code>    &lt;div id="signupForm"&gt;

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

    &lt;tr&gt;&lt;td colspan="2" class="vSpace"&gt;&lt;/td&gt;&lt;/tr&gt;

    &lt;tr&gt;
        &lt;td class="step"&gt;2&lt;/td&gt;
        &lt;td class="content" valign="bottom"&gt;
            Email Address
            &lt;input type="text" name="usernameAttempt"&gt;
        &lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;&lt;td colspan="2" class="vSpace"&gt;&lt;/td&gt;&lt;/tr&gt;

    &lt;tr&gt;
        &lt;td class="step"&gt;3&lt;/td&gt;
        &lt;td class="content" valign="bottom"&gt;
            Password
            &lt;input type="password" name="usernameAttempt"&gt;
        &lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;&lt;td colspan="2" class="vSpace"&gt;&lt;/td&gt;&lt;/tr&gt;

    &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img align="right" src="/img/signup/signup.jpg" /&gt;&lt;/td&gt;
    &lt;/tr&gt;

&lt;/tr&gt;&lt;table&gt;
&lt;/form&gt;

&lt;/div&gt;
</code></pre>

<p>Any help would be greatly appreciated! Thanks,
Mark Anderson</p>
