jQuery的：在形式输入焦点，显示DIV。隐藏模糊格（一个警告）

Question

我能够使一个隐藏的div显示/隐藏时的输入栏用下面的代码处于聚焦/模糊：

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

问题是我想div.example继续当用户进行交互的 的这个div内可见。例如。单击，或突出div.example内的文字等。然而div.example淡出每当输入未聚焦和鼠标与DIV中的元素进行交互。

有输入和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 /事件的内容进行试验，以检查重点<p>但也不能工作。

难道重要的是div.example正下方的输入栏被定位＃示例使用jQuery？这项作业的代码如下所示：

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

如果你因为气泡的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();​

更新的同时使用的focusIn和点击事件，以决定是否隐藏div.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/

<强>更新

本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/

死亡，而用的onclick I帧

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