jQuery - フォーカスがコントロールのグループを離れるときにイベントを発生

Question

div内に3つのテキストボックスがあり、フォーカスがそれらの入力の1つを残して、これらの3つの入力の別の1つに移動しないときにイベントを発生させる必要があります。

ユーザーがこれら3つのコントロールの1つを編集している限り、イベントは発生しません。イベントは、フォーカスがこれらの入力ではないコントロールに変更された場合にのみ発生します。

私はdocument.ActiveElementは、3つの入力の一つであるが、1つのコントロールのfocusoutは別でfocusin前に発生した場合、そのdocument.ActiveElementは常に空で、すべての3つの入力にfocusoutを使用してチェックしてみました。

誰もがこれを回避する方法を考えていますか？

Answer 1

このトリッキーなジレンマを解決するためにタイマーを使うことを考えます。

フォーカスが失われたら、タイマーを開始します。次に、別の「安全な」入力にフォーカスが設定されている場合は、タイマーをキャンセルすることができます。

このような何か：

var timeoutID; 

$("#TheSafeZone input").focus(function() { 
    if (timeoutID) { 
     clearTimeout(timeoutID); 
     timeoutID = null; 
    } 
}); 

$("#TheSafeZone input").blur(function() { 
    releaseTheHounds(); 
}); 

function releaseTheHounds() { 
    timeoutID = setTimeout(function() { 
      alert("You're all going to die down here"); 
    }, 1); 
} 

Here is a working example

注：私はちょうど1msにタイムアウトを設定している、これは私のために確実に動作するようだが、それは中にいくつかのテストをやって価値があるかもしれません他のブラウザ（私はChromeを使用しています）。 JSエンジンがどのようにイベントを処理するかはわかりませんが、すべてのブラウザが同じように動作すると自信をもって言えるのは分かりません。

Answer 2

逆のロジックで "ぼかし"と "フォーカス"これまでのユーザーは、DIVで指定されたコントロールのグループを離れるだけで、「ぼかし」イベントが発生します。

$(document).on("blur","#edit-area .form-control", function (event) { 
     $('.editButtons').show(); 

    }); 
    $(document).on("focus","#edit-area .form-control", function (event) { 
     $('.editButtons').hide(); 

    });