jQuery：在窗體輸入焦點上，顯示div。在模糊隱藏DIV（帶一個警告）

Question

我能夠做一個隱藏的div顯示/隱藏在輸入字段使用下面的代碼在焦點/模糊：

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

問題是我想div.example到當用戶在這個div內交互時繼續可見。例如。點擊或突出顯示div.example中的文字等。但是，只要輸入不在焦點且鼠標正在與div內的元素交互，div.example就會淡出。

輸入和div元素的HTML代碼如下：

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

如何使它使得div.example只有消失的輸入和/或div.example外的用戶點擊的時候？我試着用focusin/focusout做實驗來檢查<p>的重點，但那也沒用。

難道div.example直接位於使用jQuery的輸入字段#example的下方嗎？這項作業的代碼如下：

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

我的道歉，如果這已經被問過，但很多顯示/隱藏DIV的問題，我看不涵蓋這一點。謝謝你的建議。 :)

Answer 1

如果您跟蹤文檔中的focusin事件，因爲focusin bubbles，那麼您可以確定焦點上的新事物是否是「外部」，如果是這樣的話，可以做一些事情。這將適用於點擊和標籤。

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

已更新代碼以使用focusin和click事件來決定是否隱藏div.example。我正在使用命名空間事件，以便我可以調用unbind（'。example'）來解除它們的綁定。

例子：http://jsfiddle.net/9XmVT/11/

旁註 改變你的CSS定位的代碼只能調用CSS的方法一次：

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

例與使用絕對定位的div：http://jsfiddle.net/9XmVT/14/

UPDATE

Ben Alman剛剛更新了他的點擊事件並將其轉換爲處理大量外部事件。http://benalman.com/projects/jquery-outside-events-plugin/

將讓你做這樣的事情：

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

Answer 2

你可以使用一個定時器來引入輕微的延遲，並停止計時，如果有一個專注於外地或在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/

死亡，而用的onclick的iframe