Reputation: 3378
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
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