2

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?

2
  • does adding: e.preventDefault() after doSomething() fix the issue?
    – zzzzBov
    Dec 1, 2012 at 1:49
  • adding e.preventDefault() after doSomething() does not fix the issue. That's for the suggestion though. Dec 1, 2012 at 1:51

2 Answers 2

2

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");
}​
0

The jQuery docs say that the first argument to .keypress() is "A map of data that will be passed to the event handler." Perhaps jQuery is confused when that object is a string, which causes an error in Chrome.

To check for a particular key in the event handler, use e.which to get the character code instead.

7
  • Shift+a/n/g/k works in Chrome but not Alt+a/n/g/k... why does Chrome not like the alt key? Dec 1, 2012 at 1:46
  • This came up in a quick google search: code.google.com/p/chromium/issues/detail?id=24838 That's an old ticket, but the reasons may still be the same.
    – Douglas
    Dec 1, 2012 at 1:49
  • Interesting, the rational "keypress is only supposed to generate events when the key(s) pressed would generate content" doesn't seem to hold because Shift & Ctrl keys appear to be generating keyPress events and they would fall into the same category as the Alt key; not generating content. Still this may be the problem, a Chrome browser defect. Dec 1, 2012 at 1:57
  • edit or create a new answer including a reference to the Chrome browser defect regarding the Alt key and I'll accept the answer. Dec 1, 2012 at 2:07
  • I'm not sure I can post an answer claiming a Chrome defect :-) According to the W3C: w3.org/TR/DOM-Level-3-Events/#event-type-keypress "A user agent must dispatch this event when a key is pressed down, if and only if that key normally produces a character value."
    – Douglas
    Dec 1, 2012 at 2:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.