Question

我有一个带有几个输入字段的表单。当用户单击输入字段时，会显示隐藏的div，其中包含该字段的一些选择，然后他们可以选择一个选项，并将其设置为字段值。

目前，div被隐藏的方式是用户选择一个选项。这工作正常，但如果用户不想选择选项，则不会删除div。所以，我的解决方案是在输入字段上使用模糊事件，这将隐藏它们的div元素。这样，用户可以浏览表单，查看隐藏的div，并在离开该字段时隐藏它。这也正常。

当他们现在想要从div中点击某些内容以填充到输入中时，问题就出现了。因为我已经添加了模糊，甚至在用户尝试单击div中的选项时触发，在用户单击之前有效地隐藏div一小段时间，因此不向输入字段添加任何内容。

解决此问题的最佳方法是什么？我想让blur事件隐藏div，但是当用户想要在div中单击时，需要有某种异常，blur事件不会隐藏他们试图点击的div。

感谢您的帮助。

Answer 1

您可以在模糊事件上设置超时，并仅在另一个输入字段处于焦点时立即隐藏“帮助div”。

这样的事情：

$("#input1").focus(function() { 
      hideAllHelpers(); $("#helper1").show(); 
});

$("#input1").blur(function() { 
      window.setTimeout(function() { $("#helper1").hide(); },2000); });
});

$("#input2").focus(function() { 
      hideAllHelpers(); $("#helper2").show(); 
});

// etc...

你当然可以让它更通用，它可以使用一些微调，但你明白了......

Answer 2

Onblur，在隐藏相应的div之前设置等待一秒的超时。然后，点击，清除超时。这是一个基本的例子......

// Namespace for timer
var myPage = {
  timer: null
}

// Blur event for textbox
.blur(function() {
  myPage.timer = setTimeout(function() { 
    // Hide the div
  }, 1000);
});

// Click event for DIV
.click(function() {
  clearTimeout(myPage.timer);
  // Fill in the textbox
  $(this).hide();
});

Answer 3

我会在该字段后立即添加一个带制表位的关闭按钮。这将解决不知道秘密的用户的问题（跳过）可能没有意识到有一种方法可以在不选择选项的情况下解除对话。

Answer 4

使用mousedown事件，该事件在用户单击辅助元素但在输入元素上触发blur事件之前触发。

$('#input').blur(function () {
  $('#helper').hide();
});

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});

jQuery .blur（）和.focus（）事件的问题

4 个答案: