Question

我有一个div，它在鼠标离开该区域后自动隐藏5秒。如果div中的任何元素具有键盘焦点，我想阻止这种隐藏，如果用户选中，则重新启用。这是我的代码

delayedRollUp = function() {
    if ( !$metaArea.hasClass('active') ) {
        var timeout = setTimeout(function(){
            animateRollUp( $metaTab );
        }, 5000 );
        $metaArea.data('timeout', timeout);
    }
};

// Make the meta boxes dissapear on mouse leave
$metaArea.mouseenter( function(){
    clearTimeout($(this).data('timeout'));
}).mouseleave(function(){
    delayedRollUp();
}).focusin( function(){
    $metaArea.addClass('active');
}).focusout(function(){
    $metaArea.removeClass('active');
});

我可以看到问题是鼠标和键盘事件都没有考虑到彼此。我需要一个条件检查，例如hasMouseFocus和hasKeyboardFocus，以便我可以阻止调用setTimeout()，但我找不到像文档中那样的方法。

更新了将活动类添加到$metaArea的代码。这部分工作原因在于，如果单击某个元素，它不会隐藏，但元素之间的选项卡会导致重置超时。

我该如何解决这个问题？

Answer 1

您可以检查输入元素是否具有:focus选择器的焦点。

// Returns number of elements currently focused inside #container（0或1） $('#container input:focus').length

参考

http://api.jquery.com/focus/

检查div是否有键盘焦点

1 个答案: