John Bupit John Bupit - 3 months ago 24
Javascript Question

Different behavior of blur event in different browsers

Consider this example where I have 2 input fields:

<input id="a" />
<input id="b" style="display: none" />


And consider the following JavaScript, which is an attempt to do this:

Show
#b
only when
#a
has focus and hide
#b
whenever
#a
loses focus, except when
#a
loses its focus to
#b
.


$("#a").focus(function() {
$("#b").show();
});

$("#a, #b").blur(function() {
$("#b").hide();
});

$("#b").focus(function(){
$("#b").show();
});




$("#a").focus(function() {
$("#b").show();
});

$("#a, #b").blur(function() {
$("#b").hide();
});

$("#b").focus(function() {
$("#b").show();
});

#b {
display: none;
}

<input id="a" value=a>
<input id="b" value=b>
<br/>^ focus on the input





The above code is incorrect as
$("#b").focus()
would never be triggered because as soon as
#a
loses focus,
#b
is hidden. This expected behavior is observed in Firefox (Version 24.6.0).

But in Chrome (Version 35.0), the code seems to run incorrectly (or correctly!?).

Clearly, the
b.focus
event is still being registered in Chrome.
Why does this event register in Chrome, but not in Firefox?




Update

As pointed out by raina77ow:


  • In Chrome, after we place the cursor on
    b
    , blur on
    a
    is fired first, then focus on
    b
    , and
    b
    stays visible.

  • In Firefox, focus on
    b
    is not fired, so
    b
    becomes invisible.

  • In IE10, however, somehow focus on
    b
    IS fired, but
    b
    becomes invisible immediately, as blur is fired on
    b
    right after.



Here's a fiddle without using jQuery, producing the same behavior.

Answer

As you know, the issue is that different browsers choose to call event handlers in different orders. One solution is to give the other events a chance to fire by setting a timer for 0 milliseconds, and then checking the fields to see which (if any) is focused.

a.onfocus = function() {show(b);};

a.onblur = function() {
    setTimeout(function() {
        //if neither filed is focused
        if(document.activeElement !== b && document.activeElement !== a){
            hide(b);
        }
            }, 0);
};

//same action as for a
b.onblur = a.onblur;

Tested in Chrome, Firefox, Internet Explorer, and Safari. See full working example (edited version of your fiddle) at JSFiddle.net.