Question

I have the following jQuery code on a site I built:

$(document).ready(function() {
  // Other Bindings/Initializations Removed

  // Hotkey Event Handler to 'doSomething'
  //-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  $(document).keypress("a",function(e) {
    if(e.altKey) { // Doesn't work
      doSomething();
    }
  });

  // Hotkey Event Handler to 'doSomething'
  //-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  $(document).keypress("a",function(e) {
    if(e.shiftKey) { //Works as Expected?
      doSomething();
    }
  });

});

The code catches key-press combination events, in this case “Alt-A”, and then proceeds to call a function which preforms the appropriate action. I tested this feature in FireFox and the function was called as expected. When I tested the feature in Chrome the function was not called and an obnoxious error tone was emitted instead. I thought that perhaps “Alt-A” collided with an important browser hotkey combination so changed “A” to “N”, “G”, and then “K”; each time the function was not called and the error tone was emitted. However when I created a Shift-A/N/G/K hotkey combination, Chrome called the function as expected.

1. Why does Chrome handle the “Alt” key differently?

2. How to I define a hotkey for my site so that it will work in Chrome using the “Alt” key?

Answer 1

This works in Chrome and Firefox, however in IE Alt+a opens the favorites menu. I’m not sure how you would override that.

Fiddle

HTML:

<a accesskey="a">​

Javascript:

$(document).ready(function() {
    // Other Bindings/Initializations Removed
    // Hotkey Event Handler to 'doSomething'
    //-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    $(document).keypress("a", function(e) {

        if (e.shiftKey) { //Works as Expected?
            alert("shift a");
        }

        if (e.altKey) {
            alt_a_function();
        }

    });

    $(document).on("click", "[accesskey=a]", function() {
        alt_a_function();
    });

});

function alt_a_function() {
    alert("alt a");
}​