Problemas con los eventos jQuery .blur () y .focus ()

Question

Tengo un formulario con algunos campos de entrada. Cuando un usuario hace clic en un campo de entrada, aparece un div oculto con algunas selecciones para ese campo, luego puede elegir una opción, y esto se establece como el valor del campo.

Actualmente, la forma en que el div se oculta es cuando el usuario selecciona una opción. Esto funciona bien, pero si un usuario no quiere seleccionar una opción, el div no se eliminará. Entonces, mi solución fue usar un evento de desenfoque en los campos de entrada, que ocultaría su elemento div. De esa manera, un usuario podría pasar el formulario, ver el div oculto y ocultarlo cuando salga de ese campo. Esto funciona correctamente también.

El problema surge cuando ahora QUIEREN hacer clic en algo del div para rellenarlo en la entrada. Debido a que agregué un desenfoque incluso, que incluso se dispara cuando el usuario intenta hacer clic en una opción en el div, ocultando efectivamente el div un poco antes de que el usuario haga clic, por lo que no agrega nada al campo de entrada.

¿Cuál sería la mejor manera de resolver este problema? Me gustaría tener el evento de desenfoque para ocultar el div, pero debe haber algún tipo de excepción cuando el usuario quiera hacer clic dentro del div, para que el evento de desenfoque no oculte el div en el que está intentando hacer clic.

Gracias por la ayuda.

Answer 1

Puede establecer un tiempo de espera en el evento de desenfoque y ocultar el "ayuda div" inmediatamente solo cuando otro campo de entrada está enfocado.

Algo como esto:

$("#input1").focus(function() { 
      hideAllHelpers(); $("#helper1").show(); 
});

$("#input1").blur(function() { 
      window.setTimeout(function() { $("#helper1").hide(); },2000); });
});

$("#input2").focus(function() { 
      hideAllHelpers(); $("#helper2").show(); 
});

// etc...

Por supuesto, podría hacer que esto sea más genérico y podría usar algunos ajustes, pero se entiende la idea ...

Answer 2

Onblur, establezca un tiempo de espera que espere un segundo antes de ocultar el correspondiente div . Luego, al hacer clic, borre el tiempo de espera. Aquí hay un ejemplo básico ...

// Namespace for timer
var myPage = {
  timer: null
}

// Blur event for textbox
.blur(function() {
  myPage.timer = setTimeout(function() { 
    // Hide the div
  }, 1000);
});

// Click event for DIV
.click(function() {
  clearTimeout(myPage.timer);
  // Fill in the textbox
  $(this).hide();
});

Answer 3

Pondría agregar un botón de cierre con una tabulación inmediatamente después de ese campo. Esto resolvería el problema de que un usuario que no conoce el secreto (que lo examina) posiblemente no se dé cuenta de que hay una manera de descartar el diálogo sin elegir una opción.

Answer 4

Use el evento mousedown, que se activa cuando el usuario hace clic en el elemento auxiliar pero antes de que se desencadene el evento de desenfoque en el elemento de entrada.

$('#input').blur(function () {
  $('#helper').hide();
});

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});