1

我有代码可以将浮动控件附加到表单中的所有文本框。我已经编写了一个小提琴来展示它，但代码基本上是这样的：

#box{
    position: absolute;
    padding: 20px;
}

var $box = $('<div id="box"><input type="button" value="Click Me"></div>').hide().appendTo("#main-form");
$("#main-form").on("focus", ":text, textarea", function(){
    $text = $(this);
    $box.show().position({
        my: "right top",
        at: "left top",
        of: $text
    });
});

当用户输入文本区域（使用鼠标或键盘）时，控制框会在文本区域旁边弹出。到现在为止还挺好。

我的问题是，当不再需要时（即用户已离开文本区域），我无法找到一个好的算法来隐藏该框。显而易见的方法是不够的：

$("#main-form").on("blur", ":text, textarea", function(){
    $box.hide();
});

...因为它不允许使用控制框——一旦用户尝试单击按钮，它就会隐藏。

我目前正在这条线上尝试一些东西：

$("#main-form").on("blur", ":text, textarea", function(){
    if( $box.is(":focus") ){ // :-?
        $box.hide();
    }
});

...但我无法检测焦点是否已移至控制框。任何的想法？

编辑： jQuery API 文档是这样说的：

如果您正在寻找当前聚焦的元素，$( document.activeElement )将检索它而无需搜索整个 DOM 树。

...但在我的测试中，它始终是<body>节点：-？

4

1 回答 1

3

您可以通过像您正在做的那样听模糊 + 单击文档上的事件来实现此行为：

// Hide the $box if clicked anywhere outside of it
$(document).on('click', function(e) {
    if (!$box.data('over')) {
        $box.hide();
    } 
});

// Set a flag if $box is currently hovered
$box.on({
    mouseenter: function() {
        $(this).data('over', true);
    },
    mouseleave: function() {
        $(this).data('over', false);
    }
});

http://jsfiddle.net/g96nr/1/

于 2013-03-20T11:31:32.063 回答