Nitz Nitz - 2 months ago 23
Javascript Question

Detect Alt Gr (Alt Graph) modifier on key press

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.

Answer

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
}