Evento jQuery Stop .blur () al hacer clic en el botón “enviar”

Estoy creando una página de destino pequeña con un formulario de registro de correo electrónico de demostración simple. Quiero que el campo de formulario se abra cuando esté enfocado, y luego retroceder en el desenfoque.

Sin embargo, el problema al que me estoy enfrentando es que al hacer clic en el botón de enviar, esto activa la función de desenfoque, ocultando el botón y encogiendo el formulario. Necesito encontrar una manera de detener el método .blur () solo cuando el usuario está haciendo clic para enfocarse en el botón de envío. ¿Hay alguna buena solución para esto?

Apreciaría cualquier ayuda que pueda obtener!

No es la solución más bonita, pero funciona. Prueba esto:

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

Sé que esta pregunta es antigua, pero la forma más sencilla de hacerlo sería verificar event.relatedTarget. La primera parte de la instrucción if es para evitar que se genere un error si relatedTarget es nulo (el IF será un cortocircuito porque null es equivalente a falso y el navegador sabe que no tiene que verificar la segunda condición si la primera condición es falsa en una statement &&).

Asi que:

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

Intenta esto dentro de .blur handler:

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

¿Por qué no confiar en submit evento en lugar de click ? http://jsbin.com/ehujup/5/edit

solo un par de cambios en el html y js

ajuste las entradas en el form y agregue el correo electrónico required ya que obviamente se supone que es

 

en js, elimina el controlador que escucha #submitbtn

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

y usar en su lugar enviar el listado de formularios

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

puede usar $.ajax() para hacerlo aún mejor.

Al hacer esto, obtendrá un punto en términos de validación y el validador HTML5 del navegador nativo hará que el formato del correo electrónico de verificación sea compatible.

    Intereting Posts