How to set a "First Word Hotkey" to button in Javascript?

Question

Situation: I have a HTML Form, inside it, i have some <input>'s with some info, and a <input type=submit> that is the Send button, who sends the form content to the url set on action parameter.

Problem: Missing knowledge(i don't know how to do).

Explanation of what i want: I want a hotkey like, for example, hit now on your browser or another common software like Notepad the Alt key of your keyboard. You will see a menu coming down on the top of screen, and some Word that are underlined like this one:

Well, you see the F with a underline, and you know that if you hit the key F the File menu will be opened.

Details: The hotkey that i want, is a little different from the example above, but have the same concept. Because i want to allow the user to Press: Alt + F instead of only F to automatically click on the Button that have F set as hotkey to itself.

This way, i can place one <input id=F type=button> i used attribute ID, for example, and if i press Alt + F the button is automatically clicked.

In theory, maybe its easy, but i really do not know how to do this on Javascript.

Does someone know how to do it?

Answer 1

What you want is something like

<input type="submit" accesskey="F"/>

Now, when the users hits Alt + F (or Alt + Shift + F on Firefox) it will be as though he had clicked on the submit button.

EDIT: to use Alt + F on firefox too see this topic: http://forums.mozillazine.org/viewtopic.php?t=446830

You can change it back to how it was using about:config, change:

ui.key.chromeAccess to 5

ui.key.contentAccess to 4

In Opera, press Shift + Esc. That brings up the access key list for the current page. Then you can press any number from the access key list to follow the respective link. Users can change this keyboard shortcut under Tools > Preferences > Mouse and keyboard.

Answer 2

If you were to use jQuery.hotkeys then you would bind each key or keystroke to a function and deal with it that way.

If you gave your buttons an ID of the key you want them to respond to, you could do something like this:

$(document).ready(function () {
    var $doc, altKeys, modified;
    $doc = $(document);
    modified = function (ev) {
        var selector;
        selector = '#' + ev.data.replace(/^alt\+/, '');
        $('button').css({background: 'transparent'});
        $(selector).css({background: 'red'});
    };
    $('button').each(function () {
        var key;
        k = $(this).attr('id');
        $doc.bind('keydown', 'alt+' + k, modified);
    }); 
});

See this fiddle for a working example