19

In the javascript Event object, there are some boolean values to check if modifier keys are pressed:

  • ctrlKey: CTRL key.
  • altKey: ALT key.
  • altLeft: ALT left key. Only for IE.
  • altGraphKey: ALTGR key. Only for Chrome/Safari.

However, there are some issues:

  • IE and Chrome set ctrlKey to true and altKey to true when you press the ALTGR modifier.
  • Firefox sets ctrlKey to false and altKey to true when you press the ALTGR modifier, as only ALT has been pressed.
  • Chrome has the altGraphKey property, but it is always undefined.

Question: how can I difference between an ALT+CTRL or an ALTGR key press? Specially in Chrome.

L Y E S - C H I O U K H
  • 4,765
  • 8
  • 40
  • 57
Nitz
  • 323
  • 1
  • 2
  • 8

4 Answers4

12

The altGraphKey in webkit browsers no longer appears to exist (as at September 2013) and the behaviour of Firefox has changed. Browser behaviours for the AltGr key currently appear to be:

  • Webkit (Chrome) - ctrlKey: true, altKey: true
  • IE 8 - ctrlKey: false, altKey: true
  • IE 10 - ctrlKey: true, altKey: true
  • Mozilla (Firefox) - ctrlKey: true, altKey: true

Which is to say, they are all currently consistent (apart from IE8, which remains consistently inconsistent).

The following snippet should catch Alt Gr - but not Alt or Ctrl - in modern browsers. You will need a special case for IE8 however:

if (event.ctrlKey && event.altKey) {
    // Appears to be Alt Gr
}
GabrieleMartini
  • 1,665
  • 2
  • 19
  • 26
Jason
  • 2,271
  • 2
  • 24
  • 23
  • 3
    Pressing CTRL+ALT+S is *not* the same as pressing ALTGR+S. Am using an US-Int keyboard layout and I just had an issue where I wanted to type a German ß character with visual studio code (Electron based). And instead of an ß character I get the "run task" menu (shortcut CTRL+ALT+S) jumping at me. In my opinion this is a bug. – user643011 Jun 21 '18 at 10:19
  • 1
    The very same thing happens when you press AltGr+Q on a German keyboard. It should emit the @ character, but instead the CTRL+ALT+Q JavaScript keyboard shortcut handler gets notified. What's intriguing is that I can only reproduce this on Windows - in Linux the @ character is emitted properly. I also think this is a bug, however on Windows the behavior is consistent on Edge, Firefox and Chrome? I'm quite confused... – Martin Vysny Oct 09 '18 at 09:08
  • Nightmare on Android, where the same problem now makes VSCode via web browser largely unusable for international users. When inspecting the information sent when pressing AltGr and 8, meaning [, then the ctrlKey and altKey bools get true, yet the key (code?) actually is [ instead of 8. Still causes mayhem in Electron/VSCode as this isn't taken as a plain [ due to the set Ctrl and Alt keys. – TheDiveO Jul 05 '22 at 18:20
5

Disclaimer: I don't have a keyboard that has this key, so I can't test myself, but the spec says that can use the key property. This may be a good solution if you only need to support browsers that implement it (at time of writing, only Safari doesn't). You can check if the value is "AltGraph".

window.onkeydown = function (e) {
  if (e.key === 'AltGraph') {
    console.log(e.key);
  }
};
Frank Tan
  • 4,234
  • 2
  • 19
  • 29
  • @zuluk Thanks for the notification. Can you confirm if it works in any other browsers? – Frank Tan Oct 07 '16 at 19:16
  • @zuluk That's interesting. I wonder if any of the [other values](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) work for you? – Frank Tan Oct 10 '16 at 12:17
  • This answer works perfectly with Chrome 67 under Windows 10 both with physical and on-screen keyboard. Also differentiates between AltGr and Ctrl+Alt so it's my preferred solution for Chrome. See: https://github.com/Microsoft/vscode/issues/50341#issuecomment-399053187 Firefox and Edge still doesn't work. – user643011 Jun 21 '18 at 10:29
1

I guess the ALTGR key and CTRL+ALT key combo are the same thing and there is no way to make a difference in Javascript. Pressing ALTGR+e and CTRL+ALT+e are both producing the € (euro) symbol on my keyboard/language setup. There are pages online to check keycodes. Hope this helps.

GabrieleMartini
  • 1,665
  • 2
  • 19
  • 26
Stephan Ahlf
  • 3,310
  • 5
  • 39
  • 68
  • Yes, this was a Google Chrome bug, in Canary it works ok, in Opera and Firefox - too. Check out: http://jsfiddle.net/iegik/PpH76/ – iegik Apr 24 '13 at 12:42
1

Worth mentioning is that it is possible to detect this in modern browser by checking the location of the alt key event.

See: Is there a way to detect which side the Alt key was pressed on (right or left)?

Community
  • 1
  • 1
Robin Andersson
  • 5,150
  • 3
  • 25
  • 44