I've got two input boxes in a div, I want to hide that div on the focusOut of the inputs, but only if both of them do not have focus.

This is a mon Firefox problem (some call it adhering to standard), but the document body steals focus between.

HTML

<div id="baz">
   <input type="text" id="foo" name="foo" />
   <input type="text" id="bar" name="bar" />
</div>

jQuery

// jQuery Example
jQuery(":input").focusout(function(){
   // Don't do anything if one of the input boxes has focus
   if( jQuery(":input").is( jQuery(document.activeElement) ){ return; }

   // Hide the container if one of the inputs loose focus
   jQuery(this).parents("div").css("display","none");
}

Though this is a mon bug, I forget how I solved it in the past. I think it had something to do with setting a timeout, or doing a screen refresh, before checking for the activeElement.

jsFiddle Example

jsFiddle Updated (FF4 Same Problem)

I've got two input boxes in a div, I want to hide that div on the focusOut of the inputs, but only if both of them do not have focus.

This is a mon Firefox problem (some call it adhering to standard), but the document body steals focus between.

HTML

<div id="baz">
   <input type="text" id="foo" name="foo" />
   <input type="text" id="bar" name="bar" />
</div>

jQuery

// jQuery Example
jQuery(":input").focusout(function(){
   // Don't do anything if one of the input boxes has focus
   if( jQuery(":input").is( jQuery(document.activeElement) ){ return; }

   // Hide the container if one of the inputs loose focus
   jQuery(this).parents("div").css("display","none");
}

Though this is a mon bug, I forget how I solved it in the past. I think it had something to do with setting a timeout, or doing a screen refresh, before checking for the activeElement.

jsFiddle Example

jsFiddle Updated (FF4 Same Problem)

• javascript
• jquery
• firefox
• focusout

• small tip: Use hide() in place of css('display', 'none') – namuol Commented May 27, 2011 at 22:00
• Can you make a jsfiddle? – Jared Farrish Commented May 27, 2011 at 22:19
• @Jared: I usually would, but I was at work and leaving for the day. @namuol: I agree, I was trying to think of an example where some function is called based on the condition of the event, display was just what came to mind hide() would be better; I'm still not an advocate of pure jQueryism, I like to stick to native JavaScript, but am ing around. – vol7ron Commented May 28, 2011 at 15:08

2 Answers 2

Demo

jQuery(":input").focusout(function(){
    var elem = jQuery(this).parent("div");
    window.setTimeout(function(){
            // Don't do anything if one of the input boxes has focus
            if( jQuery(":input").is( jQuery(document.activeElement) )){ return; }

            // Hide the container if one of the inputs loose focus
            elem.hide();
    }, 0);
})

Demo

jQuery(document).ready(function () {
    var timeoutID;

    jQuery(":input").focus(function () {
        window.clearTimeout(timeoutID);
    }).focusout(function () {
        timeoutID = window.setTimeout(function () {
            jQuery("#baz").hide();
        }, 0);
    });
});

I think amit_g's solution was almost there. I vaguely remember that I've went about this in two ways:

1. pare the inputs to the activeElement (the method showed above)
2. setting/clearing a "focus" class on the element for the respective events

I think both methods required using setTimeout, since Firefox has a delayed trigger, which we need to force. While I've heard FF is adhering to standards here, I personally think that standard needs to be amended.

So in addition to adding the timed function call, it also needed to be cleared if the other "acceptable" element gained focus. The following is not production code but it does show it does serve as an example:

Example Solution

Example Solution (Even Better) - set $debug to false

Example Solution (Localized Blocks) - removed debugging clutter