jQuery "Gönder" düğmesini tıklattığınızda .blur() olayı

Question

Basit bir demo e-posta kayıt formuyla küçük bir açılış sayfası yapıyorum. Odak alanı açıldığında form alanının açılmasını ve daha sonra bulanıklaştırmak için geri çekilmesini istiyorum.

Ancak, karşı karşıya olduğum sorun, gönderme düğmesini tıkladığınızda bu, bulanıklık işlevini tetikleyerek düğmeyi gizleyerek ve formu daraltmaktır. Kullanıcı sadece gönderme düğmesine odaklanmak için tıkladığında .blur() yöntemini durdurmanın bir yolunu bulmalıyım. Bunun için iyi bir çözüm var mı?

Alabildiğim herhangi bir yardımı takdir ediyorum!

Answer 1

Bu en güzel çözüm değil, işe yarıyor. Bu deneyin:

$("#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

.blur işleyicisi içinde bu deneyin:

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

Answer 3

neden submit olay yerine click güvenmeyin? http://jsbin.com/ehujup/5/edit

sadece birkaç html içine değişiklikler ve js

sarma girişlerine form içine ve belli ki, js

<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> 

varsayalım #submitbtn

dinlemek işleyicisi kaldırmak olarak e-posta için required eklemek

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

ve bunun yerine kullan başvuru formu listererDaha da iyi hale getirmek için $.ajax() numaralı telefonu kullanabilirsiniz.

Bunu yaptığınızda doğrulama açısından puan kazanırsınız ve yerel tarayıcı HTML5 doğrulayıcı, desteklendiği yerde e-posta biçimini denetler.

Answer 4

Bu sorunun eski olduğunu biliyorum, ancak bunu yapmanın en kolay yolu event.relatedTarget adresini kontrol etmek olacaktır. If ifadesinin ilk kısmı, relatedTarget boşsa bir hata atmaktan kaçınmaktır (IF kısa devre, null, false değerine eşdeğerdir ve tarayıcı, ilk koşul yanlışsa ikinci koşulu kontrol etmek zorunda olmadığını bilir) bir & & bildirimi).

Yani:

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