Problèmes liés aux événements jQuery .blur () et .focus ()

Question

J'ai un formulaire avec quelques champs de saisie. Lorsqu'un utilisateur clique sur un champ de saisie, un div masqué apparaît avec quelques sélections pour ce champ. Il peut ensuite choisir une option et définir cette valeur comme champ.

Actuellement, la div est masquée lorsque l'utilisateur sélectionne une option. Cela fonctionne bien, mais si un utilisateur ne veut pas sélectionner une option, la div ne sera pas supprimée. Ma solution consistait donc à utiliser un événement de flou sur les champs de saisie, ce qui masquerait leur élément div. De cette façon, un utilisateur peut parcourir le formulaire, voir le div caché et le masquer quand il quitte ce champ. Cela fonctionne également correctement.

Le problème se pose quand ils veulent maintenant cliquer sur un élément de la division à renseigner. Parce que j’ajoute même un flou qui se déclenche même lorsque l’utilisateur essaie de cliquer sur une option du div, masquant ainsi la div une légère seconde avant que l’utilisateur ne clique, n’ajoutant rien au champ de saisie.

Quel serait le meilleur moyen de résoudre ce problème? J'aimerais que l'événement blur masque la div, mais il doit exister une sorte d'exception lorsque l'utilisateur souhaite cliquer à l'intérieur de la division, pour qu'il ne masque pas la div dans laquelle il essaie de cliquer.

Merci pour l'aide.

Answer 1

Vous pouvez définir un délai d'expiration pour l'événement de flou et masquer le " help div " immédiatement uniquement lorsqu'un autre champ de saisie est actif.

Quelque chose comme ça:

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

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

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

// etc...

Vous pouvez bien sûr rendre cela plus générique et utiliser un réglage plus fin, mais vous avez l’idée ...

Answer 2

Onblur, définissez un délai d’attente d’une seconde avant de masquer le div correspondant. Ensuite, cliquez sur, effacez le délai d'attente. Voici un exemple de base ...

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

Je voudrais ajouter un bouton de fermeture avec une tabulation juste après ce champ. Cela résoudrait le problème de l'utilisateur qui ne connaît pas le secret (ne pas se rendre compte qu'il est possible de ne pas se rendre compte qu'il existe un moyen de fermer la boîte de dialogue sans choisir une option.

Answer 4

Utilisez l'événement mousedown, qui se déclenche lorsque l'utilisateur clique sur l'élément d'assistance mais avant que l'événement de flou ne soit déclenché sur l'élément d'entrée.

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

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