Problèmes avec les é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 alors choisir une option, et cette valeur est la valeur du champ.

Actuellement, la div est masquée lorsque l'utilisateur sélectionne une option. Cela fonctionne très bien, mais si un utilisateur ne veut pas sélectionner une option, la div ne sera pas supprimée. Donc, ma solution était d'utiliser un flou sur les champs de saisie, ce qui cacherait leur élément div. De cette façon, un utilisateur peut parcourir le formulaire, voir le div caché et le cacher quand il quitte ce champ. Cela fonctionne aussi bien.

Le problème se pose quand ils veulent maintenant cliquer sur quelque chose de la div à remplir dans l'entrée. Parce que j'ai ajouté un flou même, qui se déclenche même lorsque l'utilisateur essaie de cliquer sur une option dans la div, cachant effectivement la div une légère seconde avant que l'utilisateur clique, donc rien ajouter dans le champ de saisie.

Quelle serait la meilleure façon de résoudre ce problème? Je voudrais avoir l'événement flou pour cacher la div, mais il doit y avoir une sorte d'exception quand l'utilisateur veut cliquer à l'intérieur de la div, que l'événement de flou ne cachera pas la div sur laquelle il essaie de cliquer.

Merci pour l'aide.

Answer 1

Vous pouvez définir un délai d'attente sur l'événement de flou et ne masquer le "div d'aide" immédiatement que lorsqu'un autre champ de saisie est actif.

Quelque chose comme ceci:

$("#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 plus générique et il pourrait utiliser quelques ajustements, mais vous voyez l'idée ...

Answer 2

ONBLUR, définir un délai qui attend une seconde avant de cacher le div correspondant. Ensuite, surcliquez, effacez le délai. 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 mettrais un bouton de fermeture avec une tabulation immédiatement après ce champ. Cela résoudrait le problème d'un utilisateur qui ne connaît pas le secret (tabulation à travers) peut-être ne réalisant pas 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'); 
});