Problemas com jQuery .blur () e .focus () eventos

Question

Eu tenho um formulário com alguns campos de entrada. Quando um usuário clica em um campo de entrada, uma div oculta aparece com algumas seleções para esse campo, eles podem, em seguida, escolha uma opção, e este definido como o valor do campo.

Atualmente, a forma como o div fica escondido é quando o usuário seleciona uma opção. Esta multa funciona, mas o que se um usuário não quiser selecionar uma opção, o div não será removido. Portanto, a minha solução foi usar um evento de borrão sobre os campos de entrada, o que escondem seu elemento div. Dessa forma, um usuário pode guia através do formulário, vendo a div oculta, e escondendo-o quando deixar esse campo. Isso funciona corretamente também.

O problema surge quando eles agora querem clique algo da div a ser preenchido na entrada. Porque eu adicionei um borrão, mesmo, que até é acionado quando o usuário está tentando clique em uma opção na div, escondendo eficazmente o div um ligeiro segundo antes de o usuário clica, e por isso adicionando nada para o campo de entrada.

Qual seria a melhor maneira de resolver este problema? Eu gostaria de ter o evento borrão para esconder a div, mas é preciso haver algum tipo de exceção quando o usuário deseja clique dentro da div, que o evento borrão não vai esconder o div que eles estão tentando clique em.

Obrigado pela ajuda.

Answer 1

Você pode definir um tempo limite sobre o evento borrão e esconder a "ajuda div" imediatamente somente quando outro campo de entrada está em foco.

Algo parecido com isto:

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

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

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

// etc...

Você poderia, claro, fazer isso mais genérico e que poderia usar algum ajuste fino, mas você começa a idéia ...

Answer 2

OnBlur, definir um tempo limite que espera um segundo antes HIDDING o div correspondente. Então, onclick, limpar o tempo limite. Aqui está um exemplo 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

Eu colocaria adicionar um botão fechar com uma tabulação imediatamente após esse campo. Isso resolveria o problema de um usuário que não sabe o segredo (tabulação through), possivelmente, não percebendo que há uma maneira para fechar o diálogo sem escolher uma opção.

Answer 4

Use o evento mousedown, o que desencadeia quando o usuário clica o elemento helper, mas antes do evento borrão é disparado no elemento de entrada.

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

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