jQuery Stop .blur() Ereignis beim Klicken auf "Senden" button

Question

Ich baue eine kleine Landing-Page mit einem einfachen Demo-E-Mail-Anmeldeformular. Ich möchte, dass das Formularfeld bei der Fokussierung geöffnet wird und dann bei der Weichzeichnung wieder verkleinert wird.

Allerdings ist das Problem, das ich konfrontiert ist, wenn Sie auf den Absenden-Button klicken, dies führt zu der Unschärfe-Funktion, versteckt die Schaltfläche und schrumpft das Formular. Ich muss einen Weg finden, die .blur() Methode nur dann zu stoppen, wenn der Benutzer sich auf den Submit-Button konzentriert. Gibt es dafür eine gute Abhilfe?

Würde mich über jede Hilfe freuen, die ich bekommen kann!

Answer 1

Es ist nicht die schönste Lösung, aber es funktioniert. Versuchen Sie folgendes:

$("#submitbtn").mousedown(function() { 
    mousedownHappened = true; 
}); 

$("#email").blur(function() { 
    if (mousedownHappened) // cancel the blur event 
    { 
     mousedownHappened = false; 
    } 
    else // blur event is okay 
    { 
     $("#email").animate({ 
      opacity: 0.75, 
      width: '-=240px' 
     }, 500, function() { 
     }); 

     // hide submit button 
     $("#submitbtn").fadeOut(400); 
    } 
});​ 

DEMO HERE

Answer 2

Versuchen Sie, diese innerhalb .blur Handler:

if ($(':focus').is('#submitbtn')) { return false; } 

Answer 3

warum nicht verlassen sich auf submit Ereignis statt click? http://jsbin.com/ehujup/5/edit

nur paar Änderungen in den HTML-Code und js

Wrap-Eingänge in die form und required für E-Mail hinzufügen, wie es offensichtlich

<form id="form"> 
<div id="signup"> 
    <input type="email" name="email" id="email" placeholder="me@email.com" tabindex="1" required="required"> 
    <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2"> 
</div> 
</form> 

in js vermuten, entfernen Sie Handler, der #submitbtn

hören

$("#submitbtn").on("click", function(e){ 
    e.stopImmediatePropagation(); 
    $("#signup").fadeOut(220); 
}); 

und verwenden Sie stattdessen Formular Listener

$("#form").on("submit", function(e){ 
    $("#signup").fadeOut(220); 
    return false; 
}); 

können Sie $.ajax() verwenden, um es noch besser zu machen.

Dadurch erhalten Sie einen Punkt in Bezug auf die Validierung und der HTML5-Validator des nativen Browsers wird das E-Mail-Format überprüfen, wo es unterstützt wird.

Answer 4

Ich weiß, dass diese Frage alt ist, aber der einfachste Weg wäre, event.relatedTarget zu überprüfen. Der erste Teil der if-Anweisung soll verhindern, dass ein Fehler ausgelöst wird, wenn relatedTarget null ist (der IF wird einen Kurzschluss verursachen, weil null gleichwertig ist und der Browser weiß, dass er die zweite Bedingung nicht prüfen muss, wenn die erste Bedingung falsch ist) in einer & & Aussage). So

:

if(event.relatedTarget && event.relatedTarget.type!="submit"){ 
    //do your animation 
}