2

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

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

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

解决这个问题的最佳方法是什么？我希望有模糊事件来隐藏 div，但是当用户想要在 div 内单击时需要有某种异常，即模糊事件不会隐藏他们试图点击的 div。

谢谢您的帮助。

4

4 回答 4

7

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

像这样的东西：

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

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

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

// etc...

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

于 2009-09-15T19:20:16.917 回答
0

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

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

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});
于 2013-01-10T23:49:13.743 回答
0

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

于 2009-09-15T19:38:52.950 回答
0

Onblur，设置一个超时时间，在隐藏相应的div. 然后，onclick，清除超时。这是一个基本的例子......

// 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();
});
于 2009-09-15T19:20:45.967 回答