JS action on focus

Question

I want to create a menu that appears only when it gets focus by tab key. For example if You open this website http://bon.agh.edu.pl/ and press tab key new menu is shown. I have a code below but it does not work?

<style>
.style{
    position: absolute;
    left: -60px;
}
.style1{
    position: absolute;
    left:10px;
}
</style>

<div id="navbar">
    <div class="menu-default-container">
        <ul id="menu-default" class="style">
            <li id="menu-item-756" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-756"><a href="http://localhost/sweetlife2">Główna</a></li>
            <li id="menu-item-753" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-753"><a href="http://localhost/sweetlife2/pakiety/">Pakiety</a></li>
            <li id="menu-item-755" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-755"><a href="http://localhost/sweetlife2/internet/">Internet</a></li>
            <li id="menu-item-754" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-754"><a href="http://localhost/sweetlife2/telewizja/">Telewizja</a></li>
            <li id="menu-item-1151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1151"><a href="http://localhost/sweetlife2/kontakt/">Kontakt</a></li>
            <li id="menu-item-1386" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1386"><a href="http://localhost/sweetlife2/dokumenty/">Dokumenty</a></li>
        </ul>
    </div>
</div>

<script>
$('#menu-default').focus(function(){
    $("#navbar").removeClass();
    $('#navbar').addClass('style1');
},
function(){
    $("#navbar").removeClass();
    $('#navbar').addClass('style');
});
</script>

I don't know what am I doing wrong. Any suggestion?

OK I managed to solve the problem. If anyone will need it the solution is bellow

var menu = document.getElementById("menu-default");
menu.addEventListener("focus", function( event ) {
   $("#navbar").removeClass();
   $('#navbar').addClass('style1');   
}, true);
menu.addEventListener("blur", function( event ) {
   $("#navbar").removeClass();
   $('#navbar').addClass('style');    
}, true)

Thank You

You could attach an `on-focus` event and only execute the callback function when the menu is not focus. If the user click on it, the event will be triggered but the callback function will not be executed (the element will already be focused). You can find out which element is focused with a little help [here](https://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus?rq=1). — C0ZEN, Nov 22 '17 at 20:22

score 0 · Answer 1 · answered Nov 22 '17 at 20:25

You should capture keypress on the body level. For example:

$("body").keypress(function( event ) {
    if ( event.which == 9) {
    event.preventDefault();
    $('#navbar').addClass('style1'); // Add or remove class.                       
   }
})

Click here for more information about keypress

JS action on focus

1 Answers1