how to hide a div on focus-out of child elements of that div(in java script)
<p>I want to hide a div on focusout of its child elements.say,</p>

<p>lets have username and password field in a div,it will be minimized initially, user will clicks opens the div then if user click anywhere outside the div should close the <code>mydiv</code> </p>

<pre><code>&lt;body&gt;

&lt;div id="mydiv" onblur="alert('hi');" tabindex="1" style="border: 1px solid black;"&gt;click off me to activate onblur
    &lt;br/&gt;
    username: &lt;input type="text" name="username" onblur="alert('hi');" tabindex="1" /&gt;
    &lt;br/&gt;
   Password: &lt;input type="text" name="password" /&gt;

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

<p>(see the JS fiddle : <a href="http://jsfiddle.net/vC7Rb/1/" rel="nofollow">http://jsfiddle.net/vC7Rb/1/</a>)</p>

<p>I tried putting onblur for both div as well as text field but that require common function call from which I need to check if any of the element is still have focus and then only hide the div.thats seems too much, so is there any simple way to do this.</p>

<p>I want implement this in pure javascript code and it should be compatible in all browser(IE,firefox,chrome).</p>
