jQuery: W formularzu fokus wprowadzania, show div. Ukryj div na rozmycie (z zastrzeżeniem)

Question

jestem w stanie dokonać ukryty div pokazać/ukryć, gdy pole wejściowe jest w centrum uwagi/blur za pomocą następującego kodu:

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

Problem Chcę div.example do będą nadal widoczne, gdy użytkownik wchodzi w interakcję pod numerem w obrębie tego elementu div. Na przykład. kliknij lub podświetl tekst itp. w ciągu div.example. Jednak div.example zanika, gdy wejście nie jest aktywne, a myszka oddziałuje z elementami wewnątrz elementu div.

Kod html do elementów wejściowych i div jest następujący:

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

Jak zrobić to tak, że div.example znika tylko gdy użytkownik kliknie poza wejściem i/lub div.example? Próbowałem eksperymentować z focusin/focusout, aby sprawdzić skupienie na <p>, ale to też nie działało.

Czy to ma znaczenie, że div.example znajduje się bezpośrednio pod polem wprowadzania #przykład przy użyciu jQuery? Kod, który robi to w sposób następujący:

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

Przepraszam jeśli ten został poproszony wcześniej, ale wiele pytań pokaż/ukryj div czytałem nie obejmuje tego. Dzięki za radę. :)

Answer 1

Jeśli śledzisz zdarzenie focusin na dokumencie, ponieważ ogniska fokusa, możesz dowiedzieć się, czy nowy obiekt jest "na zewnątrz", a jeśli tak, to zrób coś z tym. Będzie to działać zarówno dla kliknięć, jak i dla tab.

$('#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();​ 

Zaktualizowano kod, aby użyć zdarzenia focusin i click, aby zdecydować, czy ukryć div.example. Używam zdarzeń o przestrzeni nazw, aby móc wywołać polecenie unbind ('. Example'), aby je odłączyć.

Przykład: http://jsfiddle.net/9XmVT/11/

marginesie Zmień swoje css code pozycjonowanie tylko wywołać metodę css kiedyś:

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

Przykład z użyciem absolutną umieszczony Gr: http://jsfiddle.net/9XmVT/14/

UPDATE

Ben Alman właśnie zaktualizował swoje wydarzenie clickoutside i przekonwertował je, aby obsłużyć wiele * zewnętrznych wydarzeń.http://benalman.com/projects/jquery-outside-events-plugin/

pozwolił zrobić coś takiego:

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

Answer 2

można użyć czasomierza wprowadzić nieznaczne opóźnienie i zatrzymać stoper czy jest skupienie się na polu lub kliknąć na 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/

martwy podczas onclick z iframe