jQuery $(document).keydown() issues

Question

I am currently working on a web app which requires a standard desktop application menu bar. I have started to work on the menu bar and have the layout sorted.

Unfortunatrly, the client wants to have access keys (such as Alt+F) loads the "File" menu. When the Alt key is pressed, I want to show the access keys. I currently have the following jQuery code to handle this:

$(document).ready(function() {
    $(this).keydown(function(e) {
        if(e.keyCode == 18) { alt_shifter = true; $('.access_key').css({ textDecoration: 'underline' }); }
    });

    $(this).keyup(function(e) {
        if(e.keyCode == 18) { alt_shifter = false; $('.access_key').css({ textDecoration: 'none' }); }
    });
});

Unfortunately, as you'll see on the jsFiddle, for some reason in Google Chrome, when pressing Alt, the keys are underlined, then normalised on keyup. However, pressing Alt again does nothing, until the next time it's pressed. It's almost as if once the underline has been done and keyup has been fired, it does not register the keyup until it's pressed again.

Here's the jsFiddle demo > http://jsfiddle.net/Ht2wD/

Any help would be most gratefully received!

Answer 1

I altered the code to include e.preventDefault(); right before the keyCode check and it seemed to work. Here's the website that helped me arrive at that answer http://unixpapa.com/js/key.html