jQuery：在表单输入焦点上，显示div。 在模糊上隐藏div（有警告）

使用以下代码，当输入字段处于焦点/模糊时，我能够进行隐藏的div显示/隐藏：

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

问题是当用户在此div中进行交互时，我希望div.example继续可见。 例如，在div.example单击或突出显示文本等。 但是，只要输入不在焦点并且鼠标与div中的元素交互， div.example就会淡出。

输入和div元素的html代码如下：

 
 Text:  
Some text...

More text...
 
 

如何使div.example仅在用户点击输入和/或div.example外部时消失？ 我尝试使用focusin / focusout来检查对

的关注，但这也不起作用。

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

如果你跟踪焦点气泡，那么你可以找出焦点气泡，然后你可以弄清楚焦点中的新事物是否在“外部”，如果是，那么就可以做些什么。 这适用于点击和标签。

 $('#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刚刚更新了他的clickoutside事件并将其转换为处理很多*外部事件。 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

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

用iframe onclick死了

Answer 3

您可以使用计时器引入轻微的延迟，如果对该字段有焦点或点击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); })