jQuery - 焦点/模糊显示/隐藏输入组

Question

I have a little form with 2 groups of 3 inputs.

Only one input is visible for each group.

If I focus an input, all in the same group are shown.

If no input of the group is focused, only the first one should appear.

$('input').focus(function () {
    $(this).closest('div').addClass('focused');
}).blur(function () {
    $(this).closest('div').removeClass('focused');
})

This works in Chrome but not in Firefox (please check my fiddle ).
Both right hand side inputs are hidden before getting the focus.
Seems like events bubbling order is different on both browsers.

Can someone help me to make this work for all browsers ?

Answer 1

You could add a slight delay to prevent this.

$('input').focus(function () {
    var $parent = $(this).closest('div');
    var timeoutId = $parent.data('tid');

    if (timeoutId) {
        // Aborting the blur
        clearTimeout(timeoutId);
    }

    $parent.addClass('focused');
}).blur(function () {
    var $parent = $(this).closest('div');

    var tid = setTimeout(function(){
        $parent.removeClass('focused');
    }, 1);

    $parent.data('tid', tid);
})

http://jsfiddle.net/b439u/5/