FocusEvent, wie Sie herausfinden, dass es durch Maus oder Tab ausgelöst wurde

Question

Ich habe einige Code, der einige bedingte Zweige hat, wenn das FocusEvent durch einen Mausklick außerhalb der Eingabebox ausgelöst wurde oder wenn es Tabulatoren wurde. Es ist ziemlich unordentlich JS-Legacy-Code und ich habe nur Zeit, einen Hotfix hier anzuwenden.

Doc für Focus: https://developer.mozilla.org/en/docs/Web/API/FocusEvent

Im Gegensatz zu dem Click-Ereignisse des Focus hat keine Informationen über Tasten während des Ereignisses gedrückt auszulösen.

Hat jemand eine Idee, wie ich diese Informationen bekommen kann? Über Google habe ich nur Workarounds gefunden - aber ich kann einfach nicht glauben, dass dieses FocusEvent eine Möglichkeit hat, den Knopf aus der Box zu bekommen?

Answer 1

FocusEvent wird eindeutig als eine experimentelle Technologie in dem Dokument beschrieben, das Sie verknüpften. Was du fragst, könnte in Zukunft hinzugefügt werden. Aber jetzt sieht es so aus, als hätten Sie keine andere Wahl, als einen Workaround zu verwenden.

machte ich zu versuchen:

var clickWhileFocused = false; 
 

 
$("#testInput").on("tabbedOut", function() { 
 
    console.log("tabbedOut"); 
 
}); 
 

 
$("#testInput").on("clickedOut", function() { 
 
    console.log("clickedOut"); 
 
}); 
 

 
$(document).on("mousedown", function (e) { 
 
    if($("#testInput").is(":focus") && e.target.id != "testInput") { 
 
    $("#testInput").trigger("clickedOut"); 
 
    clickWhileFocused = true; 
 
    } 
 
}); 
 

 
$("#testInput").on("focusout", function() { 
 
    if(!clickWhileFocused) { 
 
    $("#testInput").trigger("tabbedOut"); 
 
    } 
 
    
 
    clickWhileFocused = false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text"/> 
 
<input id="testInput" type="text" placeholder="#testInput"/> 
 
<input type="text"/>