AltGr Key Detection Using JavaScript

Question

How can I refine the keystrokes ALT + CTRL and ALTGR ?

I found this code here as a possible solution, but it does not work:

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

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

I have this situation: for alt + ctrl + e (for example, e, it doesn’t matter) I want one, and for altGr + e another, how can I do this?

If anyone has any ideas, please tell me.

Answer 1

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

Here I have the code for RightAlter+RightCtrl+<any_valid_key>

Check out 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 is the keyup event list attached?

Here we must determine the location of the key when the Ctrl and Alt keys are pressed (during the keydown event). and we must store it in the flag variable and make it true. when the key is released (with the keyup event), it should be marked as false. Otherwise, these flags always remain true. on the next key it will always be true

Answer 2

You can use the location to determine which Alt is pressed. To support Alt + Ctrl, we will save the last location of Alt pressed.

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

Then, as soon as the Alt and Ctrl keys are pressed, do your thing. In this example, we simply write Alt as a result of the div. You can also add the condition "e":

 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); 

Answer 3

Adhering to your strict question, here are the codes for both necessary cases:

 document.addEventListener ("keydown", function (zEvent) { if (zEvent.altKey && zEvent.code === "KeyE") { if(zEvent.ctrlKey) { //Do Ctrl+Alt+E Stuff Here. } else { //Do Alt+E Stuff Here. } }); 

Now we destroy everything that is happening here. keydown allows keydown to detect multiple keystrokes.

First we check if the Alt and E keys are pressed. If so, then we continue to verify that the Ctrl key is also active and, if necessary, performs the appropriate actions.