19

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

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

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

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>

我如何使它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 问题并未涵盖这一点。谢谢你的建议。:)

4

4 回答 4

30

如果您跟踪文档上的焦点事件，因为焦点出现气泡，那么您可以确定焦点中的新事物是否在“外部”，如果是，则对其进行处理。这适用于点击和标签。

$('#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/

更新

Ben Alman 刚刚更新了他的 clickoutside 事件并将其转换为处理许多 *outside 事件。 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();
于 2010-03-11T17:52:59.110 回答
2

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

使用 iframe 进行点击时死机

于 2012-06-07T15:05:40.713 回答
1

您可以使用计时器来引入轻微的延迟，如果焦点在字段上或单击 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);
})
于 2010-03-14T02:33:16.157 回答
0

解决这个问题的一种简单的 JavaScript 方法是relatedTarget与包装器结合使用。并且由于其relatedTarget工作原理，您div.example需要集中注意力才能使用它relatedTarget。但是因为div默认情况下元素是不可聚焦的，所以您需要div.example通过向元素添加tabindex="0"ortabindex="-1"属性来使您的元素可聚焦。tabindex您可以在此 MDN文档中阅读两者之间的区别。

运行以下代码以查看此操作。我为div.example元素添加了一个红色边框以更好地表示。

const wrapper = document.getElementById("wrapper");
const toggle = document.querySelector("#example");
const target = document.querySelector("div.example");

toggle.addEventListener("focus", () => {
  target.style.display = "";
});

wrapper.addEventListener("focusout", (event) => {
  if (wrapper.contains(event.relatedTarget)) {
    return;
  }
  target.style.display = "none";
});
<div id="wrapper">
  <label for="example">Text:</label>
  <input id="example" name="example" type="text" maxlength="100" />
  <div class="example" tabindex="0" style="border: 1px solid red;">Some text...<br />More text...</div>
</div>

于 2021-07-08T09:02:22.590 回答