Detect AltGr key using JavaScript

Question

How can I clarify ALT+CTRL and ALTGR key press?

I found this code here as possible solution, but it's doesn't work:

if (event.ctrlKey && event.altKey) {

}

This code is true for alt+ctr and for altGr as well.

I have situation like this: for alt+ctrl+e (for example e, it's no matter) I want one thing and for altGr+e another, how can I do this?

If anyone have some idea, please tell me.

Answer 1

You can detect which key is pressed (from right key or left key) by value of location property in event object. If value of location property is 1 (e.location=1) then left key is pressed. if value is 2 then right key is pressed.

Here I have providing my code for RightAlter+RightCtrl+<any_valid_key>

Check this Example

var isRightAltKey=false;
var isRightCtrlKey=false;
var validKeys=['a','s','d','f','g']; //keep empty array if no need to check key


document.addEventListener("keydown", function(e) {
  if(e.key=="Alt"){
       // when right Alter pressed make isRightAltKey true 
       isRightAltKey= (e.location==2); 
       
  }
  else if(e.key=="Control"){
      // when right Control pressed make isRightCtrlKey true, 
      //if you need any ctrl key pressed then simply set isRightCtrlKey= true;
       isRightCtrlKey= (e.location==2); 
  }

  // checking both right key is pressed already or not?
  var isRightKeys= isRightAltKey && isRightCtrlKey;
  
  // validate other keys [optional]
  var isValidKey=((typeof validKeys === "undefined") || validKeys.length==0 || validKeys.indexOf(e.key.toLowerCase())>=0);
  
  if (isRightKeys && isValidKey){
    document.getElementById("detect_key").innerHTML = "RightAlt + RightCtrl + "+e.key; 
  }
  else
  {
    document.getElementById("detect_key").innerHTML="";
  }
}, false);

document.addEventListener("keyup", function(e) {
  if(e.key=="Alt"){
       // when right Alter released make isRightAltKey false
       isRightAltKey= false; 
       
  }
  else if(e.key=="Control"){
       // when right Control released make isRightCtrlKey false
       isRightCtrlKey= false; 
  }
}, false);

<div id="detect_key"></div>

Why attached keyup event listner?

Here we have to detect key location when Ctrl and Alt key is pressed (on keydown event). and we have to store it in flag variable and make it true. when key is released (on keyup event) have to mark as false. Otherwise those flags always remain true. on Next key press it will always true

Answer 2

You can use the location to determined which alt is being pressed. In order to support Alt+Ctrl we'll save the last location of the pressed Alt.

Location = 1 // Left
Location = 2 // Right 

Then, once both Alt and Ctrl are pressed, do your thing. In this example, we'll just write the Alt side in the result div. You can add the "e" pressed condition as well:

if (e.ctrlKey && e.altKey && e.key == "e"){

Example

HTML

<div class="cont">
    Click Alt + Ctrl<br /><br />
    <div id="res"></div>
</div>

Javascript

var lastAltLocation;

document.addEventListener("keydown", function(e) {
   if (e.key == "Alt"){
     lastAltLocation = e.location;
   }
   if (e.ctrlKey && e.altKey){
       if (lastAltLocation == 1){
           document.getElementById("res").innerHTML = "Left";
       }
       if (lastAltLocation == 2){
           document.getElementById("res").innerHTML = "Right";
       }
   } 
}, false);