Detecting command + keystroke in Safari

Question

I'm trying to intercept the command + keystroke in Safari. I've added an event handler as follows:

document.onkeypress = handleKeyPress;

function handleKeyPress(event) {
    if ("+" === String.fromCharCode(event.charCode) && event.metaKey) {
        // my code here
        return false;
    }
    return true;
}

When I hit command shift = (shift = is + on my US keyboard), the if statement does not return true.

If I remove the event.metaKey portion of the if statement and hit shift =, the if statement does return true.

Also, if I change the matching string from "+" to "=" and hit command = (with or without the shift key), the if statement does return true.

Is there a way to actually detect the command + keypress (without assuming that the + key is shift = and checking for the event.shiftKey, since this will not be true for some non-US keyboards)?

Answer 1

First of all, I can't necessarily recommend using ⌘+ as a shortcut, since it already means something in Safari (namely, zoom the page). Someone might want that to still work normally. Depending on what you're building, it might make sense, but don't override the default shortcuts unless you're sure.

Anyway: Key events are tricky, often because the keyCode/charCode/which properties don't always match up with the right letter, so String.fromCharCode won't always get you a proper string. keyIdentifier is sometimes a better thing to look at, but not always (for instance, its codes for letter keys are always uppercase letters).

What I've done in the past (and I'm not sure that this is the best way to do it, but it works ok), is to instead listen for keydown and keyup events, and "stack" modifier keys. I.e. whenever a key is depressed, check whether it's a modifier key (i.e. if it's cmd, ctrl, alt, or shift). If it is, add it to the "stack" of modifiers. Do the opposite on keyup; if the released key was a modifier, remove it from the stack.

Now, back in the keydown-handler, if the key wasn't a modifier key, you can send the keydown event (which, unlike a keypress event, will have a pretty reliable keyIdentifier property to check), and the stack of modifiers along to some other callback, that'll take it from there.

In your case, such a callback would check that the cmd-key is in the stack, and that the keyIdentifier for the keydown event is "U+002B" (which is the unicode code for +).

I've put together a jsfiddle example of what I'm talking about. If you click in the "Result" pane (to make sure it's got focus), and press ⌘+, it should show the key combo you used, and write "Success!" below. Otherwise, it'll just show the key combo. On my keyboard, the plus sign is directly accessible, so the key combo I see is just "⌘+". But if you need shift to type a plus sign, you should see "⇧⌘+".

It's a generalized piece of code that's good for handling keyboard shortcuts in Safari/Mac, so you can build on it, if you want. You'll want to add a few event listeners to reset the modifier stack on blur events and such. Ideally, the modifier stack would reset automatically, as you release the keys, but since something might cause the browser, or the observed element/window/document, to lose focus, the keyup events won't be handled, and the released keys won't be removed from the stack. So check for blur events.

Answer 2

Register the event object in a window object level one, event = window.EE for example, then browse it with Firebug or Safari’s Web Developer Tools and see the values that are triggered when you want. So you will know what to compare against.

Answer 3

Sadly, I don't think there is an answer. The problem is, for CMD+SHIFT+= the charCode being pressed is 61 (=), not 43 (+). This appears to be a system-wide design, in that Mac OS X itself interprets CMD+SHIFT+= as = plus two modifiers, not + and COMMAND.

I put together a simple jsFiddle to show this: http://jsfiddle.net/ScuDj/1/

Basically, you are going to have to deal with keyboard layouts if you want to detect COMMAND +.

Alternatively, you could only support the numeric keypad + - that works consistently! (just kidding ;-)

(Also: I tried to attach to the textInput event, but couldn't get it to register globally. I think it only works on domNodes. I've not really used that event much.)