Wie erkennt man, wenn das gesamte Formular nicht fokussiert ist?

Question

Ich habe ein Textformular mit einem Eingabefeld für Name und einem Eingabefeld für E-Mail. Wenn der Benutzer auf der mobilen Website auf ein Feld klickt, wird es mit der darunter liegenden Tastatur an den Anfang des Ansichtsfensters gebracht. Wenn jedoch ein Textfeld deaktiviert ist, bleibt es hier hängen und wird nicht zurückgesetzt.

Ich habe das jquery focusOut -Ereignis gefunden, um den Seitenzoom zurückzusetzen, aber dies wird ausgelöst, wenn eines der Felder nicht fokussiert ist (dh wenn die Namensfelder aktiv sind und die E-Mail nicht aktiv ist). Wie kann ich erkennen, wenn kein Eingabefeld im Fokus ist?

Gerade jetzt meine Form-Code ist:

<form class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()"> 
     <input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required> 
     <label for="inputEmail" class="sr-only">Email address</label> 
     <input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required> 
     <button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button> 
</form> 

und mein javascript:

$("form").focusout(function() { 
document.body.scrollTop = 0; 
console.log("focus out"); 
}) 

Welche abgewählt jedes Mal entweder Feld abfeuert. Ich will, dass es feuert, wenn keiner ausgewählt ist.

Answer 1

Sie müssen überprüfen, dass keines der anderen Mitglieder in der Zwischenzeit aktiv geworden ist. Focusout sagt Ihnen nur, wenn eines der Eingabefelder den Fokus verliert.

Versuchen Sie, den folgenden Code:

$("form").focusout(function() { 
 
    var anyActive = false; 
 
    $.each($(this).find(':input'), function(index, inputField){ 
 
     if($(inputField).is(':active')){ 
 
      anyActive = true; 
 
     } 
 
    }); 
 
    if(anyActive){ 
 
     $('#focusBox').html('One is active'); 
 
    } else { 
 
     $('#focusBox').html('None is active'); 
 
    } 
 
    document.body.scrollTop = 0; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()"> 
 
     <input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required> 
 
     <label for="inputEmail" class="sr-only">Email address</label> 
 
     <input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required> 
 
     <button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button> 
 
</form> 
 

 
<div id="focusBox"></div>

Answer 2

ich mit dieser Art der Sache in der Vergangenheit durch einen Blick auf Fokus-Ereignisse für die gesamte Seite als Ganzes behandelt haben. Im Wesentlichen verwende ich zwei Flags, um zu verfolgen, ob das Formular 1) den Fokus hat oder nicht und 2) jemals den Fokus hatte. Dann verwende ich einen einzigen Handler für beide click und focusin für den gesamten Körper der Blick auf das Ziel des Ereignisses: Wenn dieses Ziel innerhalb des Formulars ist, wissen wir, dass das Formular nicht den Fokus verloren hat. Wenn nicht und wasFormFocused, dann wissen wir, dass das Formular den Fokus verloren hat: Setzen Sie die Flags zurück und tun Sie alles, was sonst noch nötig ist (in diesem Fall scrollen Sie nach oben). Diese Lösung behandelt das Ausblenden, Ausklicken und Klicken auf Labels mit dem Formular.

var wasFormFocused = false, isFormFocused = false; 
 

 
$("#theForm").focusout(function() { 
 
    isFormFocused = false; 
 
}); 
 

 
var handleClickOrTab = function(event) { 
 
    if ($(event.target).parents("#theForm").length) { 
 
     wasFormFocused = true; 
 
     return; 
 
    } 
 

 
    if (wasFormFocused && !isFormFocused) { 
 
     wasFormFocused = false; 
 
     document.body.scrollTop = 0; 
 
     $("body").append('<br>form lost focus (scrollTop = 0)'); 
 
    } 
 
} 
 
$("body").click(handleClickOrTab).focusin(handleClickOrTab);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="theForm" class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()"> 
 
    <input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required> 
 
    <label for="inputEmail" class="sr-only">Email address</label> 
 
    <input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required> 
 
    <button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button> 
 
</form> 
 

 
<h4>CLICK me (cause you can't tab to me)</h4> 
 
<input type="text" placeholder="TAB to me or CLICK me">