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

Question

我有一个包含2组3个输入的小形式。

每组只能看到一个输入。

如果我对输入进行了聚焦，则会显示同一组中的所有内容。

如果没有聚焦该组的输入，则只应显示第一个。

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

这适用于Chrome，但不适用于Firefox（请查看my fiddle） 在获得焦点之前，两个右侧输入都被隐藏 似乎事件冒泡顺序在两个浏览器上都不同。

有人可以帮助我让所有浏览器都能使用吗？

Answer 1

您可以添加一点延迟来防止这种情况发生。

$('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/