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 possibl
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.
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>
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.
<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