1

div に 2 つの入力ボックスがあります。入力の focusOut でその div を非表示にしたいのですが、両方にフォーカスがない場合に限ります。

これは 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 同じ問題)

4

2 に答える 2

7

デモ

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);
    });
});
于 2011-05-27T22:19:03.363 に答える
0

amit_gの解決策はほぼそこにあったと思います。私はこれについて2つの方法で行ったことを漠然と覚えています。

  1. activeElement入力を(上記のメソッド)と比較します。
  2. それぞれのイベントの要素に「フォーカス」クラスを設定/クリアする

setTimeoutFirefoxには強制する必要がある遅延トリガーがあるため、両方の方法で を使用する必要があると思います。FFはここで基準を遵守していると聞いていますが、個人的には基準を修正する必要があると思います.

そのため、時限関数呼び出しを追加するだけでなく、他の「許容される」要素がフォーカスを得た場合にもクリアする必要がありました。以下は製品コードではありませんが、例として役立つことを示しています。

ソリューション例

解決例 (さらに良い) - に$debug設定false

解決例 (ローカライズされたブロック) - デバッグの煩雑さを解消

于 2011-05-28T16:56:11.093 に答える