Question

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

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

当用户输入textarea（使用鼠标或键盘）时，控制框会在textarea旁边弹出。到目前为止一切都很好。

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

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

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

我正在尝试这条线：

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

...但我无法检测焦点是否已移至控制箱。有什么想法吗？

修改：jQuery API Documentation说明了这一点：

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

...但是in my tests 总是 <body>节点： - ？

Answer 1

你可以通过监听模糊来实现这种行为，就像你在文档上点击事件一样：

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

在模糊上隐藏框的算法

1 个答案: