jQuery: Sur le focus d'entrée de formulaire, affiche div. cacher div sur le flou (avec une mise en garde)

Question

Je suis en mesure de faire un spectacle div caché/cacher quand un champ d'entrée est mise au point/flou en utilisant le code suivant:

$('#example').focus(function() { 
    $('div.example').css('display','block'); 
    }).blur(function() { 
    $('div.example').fadeOut('medium'); 
    }); 

Le problème est que je veux div.example à continuer à être visible lorsque l'utilisateur interagit au sein de ce div. Par exemple. cliquez sur ou surligner le texte etc. dans div.example. Cependant, div.example disparaît lorsque l'entrée n'est pas active et que la souris interagit avec les éléments de la div.

Le code html pour les éléments d'entrée et div est comme suit:

<p> 
<label for="example">Text:</label> 
<input id="example" name="example" type="text" maxlength="100" /> 
<div class="example">Some text...<br /><br />More text...</div> 
</p> 

Comment puis-je faire de sorte que le div.example disparaît uniquement lorsque l'utilisateur clique en dehors de l'entrée et/ou div.example? J'ai essayé d'expérimenter avec focusin/focusout pour vérifier l'accent sur <p> mais cela n'a pas fonctionné non plus.

Est-il important que div.example soit positionné directement sous le champ #exemple en utilisant jQuery? Le code qui fait cela est la suivante:

var fieldExample = $('#example'); 
$('div.example').css("position","absolute"); 
$('div.example').css("left", fieldExample.offset().left); 
$('div.example').css("top", fieldExample.offset().top + fieldExample.outerHeight()); 

Mes excuses si cela a été demandé avant, mais les nombreuses questions div show/hide que je lis ne couvre pas. Merci pour vos conseils. :)

Answer 1

Si vous dépistez l'événement focusin sur le document depuis le focus dans des bulles, vous pouvez alors déterminer si le nouveau focus est "outside" et si c'est le cas, faites quelque chose. Cela fonctionnera pour les clics et les tabulations.

$('#example').focus(function() { 
    var div = $('div.example').show(); 
    $(document).bind('focusin.example click.example',function(e) { 
     if ($(e.target).closest('.example, #example').length) return; 
     $(document).unbind('.example'); 
     div.fadeOut('medium'); 
    }); 
}); 
$('div.example').hide();​ 

Mise à jour le code à utiliser à la fois la focusIn et cliquez sur événement pour décider si pour cacher la div.example. J'utilise des événements de type namespaced pour que je puisse appeler unbind ('. Example') pour les délier tous les deux.

Exemple: http://jsfiddle.net/9XmVT/11/

Side Note Modifier votre code de positionnement css seulement appeler la méthode css une fois:

$('div.example').css({ 
    "position":"absolute", 
    "left": fieldExample.offset().left, 
    "top": fieldExample.offset().top + fieldExample.outerHeight() 
}); 

Exemple avec l'aide de la div positionné absolu: http://jsfiddle.net/9XmVT/14/

MISE À JOUR

Ben Alman vient de mettre à jour son événement clickoutside et l'a converti pour gérer un grand nombre d'événements extérieurs.http://benalman.com/projects/jquery-outside-events-plugin/

laisseriez-vous faire quelque chose comme ceci:

$('#example').focus(function() { 
    $('div.example').show().bind('focusoutside clickoutside',function(e) { 
     $(this).unbind('focusoutside clickoutside').fadeOut('medium'); 
    }); 
}); 
$('div.example').hide(); 

Answer 2

Vous pouvez utiliser une minuterie pour introduire un léger retard, et arrêter le chronomètre s'il y a une mise au point sur le terrain ou un clic sur le div:

var timer = false ; 
$('#example').focus(function() { 
    if (timer) 
     clearTimeout(timer); 
    $('div.example').css('display','block'); 

    }).blur(function() { 

    if (timer) 
     clearTimeout(timer); 

    timer = setTimeout(function(){ 
      $('div.example').fadeOut('medium'); 
     },500); 

    }); 

$('div.example').click(function(){ 
    if (timer) 
     clearTimeout(timer); 
}) 

Answer 3

http://jsfiddle.net/9XmVT/699/

morts en onclick avec Iframe