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