Question

当输入字段处于焦点/模糊状态时，我可以使用以下代码进行隐藏的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代码如下：

<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>，但这也不起作用。

使用jQuery将div.example直接放在输入字段#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/

<强>更新

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);
})

Answer 4

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

运行以下代码以查看此操作。我为 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>

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

4 个答案: