Twifty
Twifty

Reputation: 3378

Check if div has keyboard focus

I have a div which auto hides 5 seconds after the mouse leaves the area. I want to prevent this hiding if any element within the div has keyboard focus and re-enable if the user tabs out. This is my code

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

I can see the problem is that both mouse and keyboard events are not taking each other into account. I need a conditional check, something like hasMouseFocus and hasKeyboardFocus so that I can prevent setTimeout() from being called, but I cannot find any methods like those in the docs.

Updated the code to add an active class to the $metaArea. This partly works in that it doesn't hide if clicking on an element, but tabbing between elements is causing the timeout to be reset.

How can I resolve this?

Upvotes: 2

Views: 1889

Answers (1)

Mina
Mina

Reputation: 1516

You can check if an input element has focus with the :focus selector.

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

Reference

Upvotes: 2

Related Questions