jQuery: Firefox 聚焦事件

Question

我在一個 div 中有兩個輸入框，我想將該 div 隱藏在輸入的 focusOut 上，但前提是它們都沒有焦點。

這是一個常見的 Firefox 問題（有人稱其為遵守標准），但文檔正文竊取了焦點。

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");
}

雖然這是一個常見的錯誤，但我忘記了我過去是如何解決的。 我認為這與在檢查activeElement之前設置超時或進行屏幕刷新有關。

---

jsFiddle 示例

jsFiddle 更新（FF4 相同問題）

Answer 1

演示

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);
})

演示

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

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

Answer 2

我認為 amit_g 的解決方案幾乎就在那里。 我依稀記得我已經通過兩種方式解決了這個問題：

1. 將輸入與activeElement進行比較（如上所示的方法）
2. 在相應事件的元素上設置/清除“焦點”class

我認為這兩種方法都需要使用setTimeout ，因為 Firefox 有一個延遲觸發，我們需要強制。 雖然我聽說 FF 在這里遵守標准，但我個人認為該標准需要修改。

---

因此，除了添加定時 function 調用之外，如果其他“可接受”元素獲得焦點，也需要將其清除。 以下不是生產代碼，但確實表明它確實可以作為示例：

示例解決方案

示例解決方案（更好） - 將$debug設置為false

示例解決方案（本地化塊） - 消除了調試混亂