jQuery - Ereignis auslösen, wenn der Fokus eine Gruppe von Steuerelementen verlässt

Question

Ich habe 3 Textfelder in einem div und ich muss ein Ereignis auslösen, wenn der Fokus einen dieser Eingänge verlässt und nicht zu einem anderen dieser 3 Eingänge geht.

Solange der Benutzer eines dieser drei Steuerelemente bearbeitet, wird das Ereignis nicht ausgelöst. Das Ereignis wird nur ausgelöst, wenn der Fokus auf ein Steuerelement geändert wurde, das nicht einer dieser Eingaben ist.

Ich versuchte focusout an allen drei Eingängen verwenden und prüfen, ob document.ActiveElement einer der drei Eingänge ist aber focusout eine Kontrolle auftritt, bevor focusin auf einem anderen so document.ActiveElement immer leer ist.

Wer hat eine Idee, wie man das umgehen kann?

Answer 1

Ich würde einen Timer verwenden, um dieses schwierige Dilemma zu lösen.

Wenn der Fokus verloren geht, starten Sie den Timer. Dann können Sie den Timer abbrechen, wenn der Fokus dann auf einen anderen "sicheren" Eingang gesetzt wird.

Etwas wie folgt aus:

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

HINWEIS: Ich habe das Timeout eingestellt haben, dass nur 1ms, scheint dies für mich zuverlässig zu arbeiten, aber es kann dabei ein paar Tests lohnen andere Browser (ich verwende Chrome). Ich denke, es hängt davon ab, wie die JS-Engine Ereignisse verarbeitet, aber ich weiß nicht genug darüber, um sicher zu sagen, dass alle Browser die gleichen funktionieren

Answer 2

Put "Blur" und "Focus" Ereignisse mit entgegengesetzter Logik, so dass wenn je Benutzer verlässt Gruppe von Steuerelementen in DIV angegeben nur "Blur" Ereignis wird ausgelöst.

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

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

    });