jQuery foco/desenfoque en la forma, no entradas individuales

Question

¿Cómo podría lograrse esto a través de jQuery?

Cuando el usuario hace clic en cualquier entrada del formulario, se enfoca. Cuando un usuario hace clic fuera del formulario desde cualquier entrada, se ve borroso, pero no se desencadena el desenfoque entre tabulaciones entre entradas en el formulario mismo.

para algo como esto, estamos buscando a esta estructura básica:

<form> 
<input ... /> 
<input ... /> 
<input ... /> 
</form> 

Así que de nuevo, digamos que hago clic en cualquier entrada en la forma, sabemos que la forma está enfocado. A continuación, cuando el usuario hace clic en CUALQUIER entrada, el desenfoque solo se desencadena si hacemos clic fuera del formulario.

He hecho esta pregunta anteriormente y amablemente he recibido información sobre cómo lograr el efecto de desenfoque cuando el último campo de entrada en el formulario estaba borroso, pero no desde ningún elemento en la lista de entrada.

Gracias, Mark Anderson

Answer 1

La secuencia de eventos cuando se está de tabulación entre las entradas:

Click on input1: input1 focus 

    Clickb on input2: input1 blur 
        input2 focus 

    Click outside: input2 blur 

Cuando una entrada pierde la concentración que necesita para comprobar si algún otro elemento dentro de las ganancias foco formulario. O simplemente puede comprobar si el elemento activo está todavía dentro de la forma:

$('form').on('focusout', function(event) { 
    setTimeout(function() { 
     if (!event.delegateTarget.contains(document.activeElement)) { 
      console.log('Form blur'); 
     } 
    }, 0); 
}); 

JSFiddle

Tenga en cuenta que la forma no falta de definición en presentar, por lo que puede que tenga que agregar un controlador presentar si quiere haz lo mismo en blur y submit.

También tenga en cuenta el uso de setTimeout, es necesario porque los eventos blur y focusout se emiten cuando un elemento está a punto de perder el foco, pero aún no lo ha perdido.

Answer 2

Se podría hacer algo como esto:

var check; 

$('form input').focus(function() 
    { 
    clearInterval(check); // remove setinterval if any 
    // do something because the form is being used 
    }); 

$('form input').blur(function() 
{ 
    check = setInterval(function() 
    { 
     // do something because the form is not being used 
    },500); // half-second delay 
}); 

No es la solución más atractiva, pero comprueba si se produce ningún foco en su forma después de .5 segundos. Espero que esto ayude.

Answer 3

¿No funcionaría $('form').focusin()/focusout()?

http://api.jquery.com/focusout/

Answer 4

Ésta es la misma idea básica tal como Alexey de pero para jQuery 1.7+ y, al menos en mi opinión, un poco más fácil de leer, ya que mantiene todo en su alcance dentro del mismo controlador:

$("#myform").on("focusout focusin", "input", function(e){ 
     if (e.type == "focusout") { 
      $("#myform").attr("form-blur-timeout", window.setTimeout(function(){ 
       console.log("you've left the form!");//do stuff here 
      }, 100)); 
     } else { 
      window.clearTimeout($("#myform").attr("form-blur-timeout")); 
     } 
    }); 

Enjoy :)