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

Question

Is there a way that we can detect which side the Alt key was pressed on, i.e. distinguish between left or right Alt? I saw somewhere that it's possible with IE with the altLeft and altRight properties of the Event object. If that is correct, how can we detect it in Firefox with JavaScript?

This is how it works in IE for altLeft:

window.onload = function(){
  document.getElementById('id').onkeydown = function(){
    alert(window.event.altLeft);
  }
}

In this test case there simply seems to be no difference in the event objects when the left or right alt key is pressed, except the timestamps: http://jsfiddle.net/8gY5M/. — pimvdb, Dec 19 '11 at 14:33

Tim Down · Accepted Answer · 2015-11-16T10:28:38.267

2015 answer

DOM3 added a location property of keyboard events (see also MDN) (earlier versions had a keyLocation property instead) which does what you want and is implemented in recent versions of all major browsers.

Demo:

document.getElementById("ta").addEventListener("keydown", function(e) {
  var keyLocation = ["Standard", "Left", "Right", "Numpad", "Mobile", "Joystick"][e.location];
  var message = "Key '" + (e.key || e.keyIdentifier || e.keyCode) + "' is down. Location: " + keyLocation;
  this.value += "\n" + message;
  e.preventDefault();
}, false);

<textarea id="ta" rows="10" cols="50">Click on here and press some modifier keys such as Shift</textarea>

2011 answer

No. In general, it is impossible to distinguish between left and right modifier keys in a cross-browser way. The shiftLeft, shiftRight, ctrlLeft, ctrlRight, altLeft, altRight properties of window.event are all IE only and no equivalent exists in other browsers.

DOM3 added a location property of keyboard events (earlier versions had a keyLocation property instead) but Firefox does not implement this.

It should be noted that as of Firefox 15, the [`location` property is implemented](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location#Browser_compatibility) — Lucien Greathouse, Nov 13 '15 at 20:21

score 5 · Answer 2 · answered Dec 19 '11 at 14:37

Good question. The event object does not contain anything about which alt is pressed but you can try something like this:

var altLeft = false,
    altRight = false,
    time = null;

document.onkeydown = function (e) {
    e = e || window.event;
    //The time check is because firefox triggers alt Right + alt Left when you press alt Right so you must skip alt Left if it comes immediatelly after alt Right
    if (e.keyCode === 18 && (time === null || ((+new Date) - time) > 50)) {
        altLeft = true;
        time = null;
    } else if (e.keyCode === 17) {
        altRight = true;
        time = + new Date;
    }
}

document.onkeyup = function (e) {
    e = e || window.event;
    if (e.keyCode === 18) altLeft = false;
    else if (e.keyCode === 17) altRight = false;
}

document.onclick = function () {
    console.log("left", altLeft, "right", altRight);
}

It works for me in Firefox, anyway the 17 and 18 (that are key codes for alt Right and Left) can change on different browsers or operating systems so you must check them.

If you're getting a `keyCode` other than 18 then the key you're pressing is not `Alt`. You cannot distinguish between alt keys in Firefox. — Tim Down, Dec 19 '11 at 14:45
I have Firefox 8 and if i press Alt Left i get 18 if i press Alt Right the event is triggered twice and i get 17 and 18. — mck89, Dec 19 '11 at 14:59
To be honest i get 17 for Ctrl too so in the click function the altKey property on the event object must be checked — mck89, Dec 19 '11 at 15:06

score 0 · Answer 3 · edited Jan 26 '16 at 13:09

<html>
    <head>
        <title></title>
        <script type="text/javascript">
        flag = 0;
        text = ['else', 'Ctrl', 'AltGr', 'Alt'];

        function key_down(e) {
            var aa = e.keyCode;
            if (aa == 18) {
                event.keyCode = 0;
                event.returnValue = false;
            }
            this_key(aa);
        }

        function this_key(fn1) {
            if (fn1 == 17) {
                flag = 1;
                timer = setTimeout('this_key(1)', 10);
                return;
            }
            if (fn1 == 18 && flag == 1) {
                clearTimeout(timer);
            }

            var aa = 0;

            if (fn1 == 1) {
                aa = 1;
            }
            if (fn1 == 18) {
                if (flag == 1) {
                    aa = 2;
                } else {
                    aa = 3;
                }
            }

            document.getElementById('result').innerHTML = text[aa];
            flag = 0;
        }
        </script>
    </head>

    <body onkeydown="key_down(event);">
        <div id="result" style="font-size: 5em;"></div>
    </body>

</html>

Here is my solution

Would you mind explaining it? The variable names are far from self-descriptive, no comment whatsoever... The answer is not very useful if it cannot be understood. — CherryDT, Jan 29 '18 at 09:38

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

3 Answers3

2015 answer

2011 answer

Linked