jQuery：在表单输入焦点上，显示 div。隐藏 div 模糊（有一个警告）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2426438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: On form input focus, show div. hide div on blur (with a caveat)
提问by Lyon
I am able to make a hidden div show/hide when an input field is in focus/blur using the following code:
当输入字段处于焦点/模糊状态时，我可以使用以下代码显示/隐藏隐藏的 div：
$('#example').focus(function() {
$('div.example').css('display','block');
}).blur(function() {
$('div.example').fadeOut('medium');
});
The problem is I want div.exampleto continue to be visible when the user is interacting withinthis div. E.g. click, or highlighting the text etc. within div.example. However div.examplefades out whenever the input is not in focus and the mouse is interacting with elements within the div.
问题是div.example当用户在这个 div 中交互时，我想继续可见。例如，单击或突出显示 中的文本等div.example。但是div.example，只要输入不在焦点上并且鼠标与 div 中的元素交互，就会淡出。
The html code for the input and div elements is as follows:
input和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>
How do I make it such that the div.exampleonly disappears when the user clicks outside the input and/or div.example? I tried experimenting with focusin/focusout to check the focus on <p>but that didn't work either.
我如何使它div.example只有当用户在输入和/或外部点击时才会消失div.example？我尝试尝试使用 focusin/focusout 来检查焦点，<p>但这也不起作用。
Would it matter that div.exampleis positioned directly below the input field #example using jQuery? The code that does that is as follows:
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());
My apologies if this has been asked before, but the many show/hide div questions I read does not cover this. Thanks for your advice. :)
如果之前有人问过这个问题，我深表歉意，但我阅读的许多显示/隐藏 div 问题并未涵盖这一点。谢谢你的建议。:)
回答by PetersenDidIt
If you track the focusin event on the document since focusin bubbles then you can figure out if the new thing in focus is "outside" and if so do something about it. This will work for both clicks and tabbing.
如果您跟踪文档上的 focusin 事件，因为 focusin 冒泡，那么您可以确定焦点中的新事物是否在“外部”，如果是，则对其进行处理。这将适用于点击和标签。
$('#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();?
Updated the code to use both the focusin and click event to decide if to hide the div.example. I am using namespaced events so that I can call unbind('.example') to unbind both of them.
更新了代码以使用 focusin 和 click 事件来决定是否隐藏 div.example。我正在使用命名空间事件，以便我可以调用 unbind('.example') 来解除它们两个的绑定。
Example: http://jsfiddle.net/9XmVT/11/
示例：http: //jsfiddle.net/9XmVT/11/
Side NoteChange your css positioning code to only call the css method once:
旁注更改您的 css 定位代码以仅调用一次 css 方法：
$('div.example').css({
"position":"absolute",
"left": fieldExample.offset().left,
"top": fieldExample.offset().top + fieldExample.outerHeight()
});
Example with using the absolute positioned div: http://jsfiddle.net/9XmVT/14/
使用绝对定位 div 的示例：http: //jsfiddle.net/9XmVT/14/
UPDATE
更新
Ben Alman just updated his clickoutside event and converted it to handle alot of *outside events. http://benalman.com/projects/jquery-outside-events-plugin/
Ben Alman 刚刚更新了他的 clickoutside 事件并将其转换为处理大量 *outside 事件。 http://benalman.com/projects/jquery-outside-events-plugin/
Would let you do something like this:
会让你做这样的事情：
$('#example').focus(function() {
$('div.example').show().bind('focusoutside clickoutside',function(e) {
$(this).unbind('focusoutside clickoutside').fadeOut('medium');
});
});
$('div.example').hide();
回答by TomSawyer
http://jsfiddle.net/9XmVT/699/
http://jsfiddle.net/9XmVT/699/
dead while onclick with Iframe
使用 Iframe 在点击时死亡
回答by Ben
You could use a timer to introduce a slight delay, and stop the timer if there's a focus on the field or a click on the div:
您可以使用计时器来引入轻微的延迟，并在该字段上有焦点或单击 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);
})
