Trying to bind alt gr key and it doesn't work in chrome

Question

Previously worked well in all browsers but for some reason ALT GR dosent work in chrome. Im totaly out of idees to get this to work..

Its working with CTRL + ALT + Q in all browsers

Using Chrome Version 67.0.3396.87 (Officiell version) (64 bitar)

$(document).on("keydown", function(event)
{
    console.log(event.ctrlKey);
    console.log(event.altKey);
        
    // AltGr+Q
    if(event.which === 81 && event.ctrlKey && event.altKey)
    {          
        $("#notes").empty('');
        $("#notes").append("Success!<br/>" , " Event: ", event.which, " ctrlKey: ", event.ctrlKey, " Altkey: ", event.altKey);
        return false;
     }
     else
     {
        $("#notes").empty('');
        $("#notes").append("Fail! <br/>" , " Event: ", event.which, " ctrlKey: ", event.ctrlKey, " Altkey: ", event.altKey);
        return false;
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="notes">Klick to focus snippet and test keydown event, works well in Explorer/Edge but not in chrome</span>
<div/>

Yes, it seems that in the newest version the `alt gr` was changed from an altKey to a controlKey (keycode 17, previously 18). Have a look at the output of `console.log(event)`. It worked for me in version 65, so something on the road has to be changed. Maybe [this](https://stackoverflow.com/q/8562528/4202224) will help you — empiric, Jun 13 '18 at 10:16

Jonathan · Accepted Answer · 2019-05-17T11:43:37.873

I found the answer to my question. I really don't like the solution because its a bit messy and i dont know if its bulletproof. Any insight on this one would be greatly appreciated and if there's an outer approach to be taken here that would be a bit more clean.

var altgr = false;   
    
    $(document).on("keyup", function (event) {
        if((event.key === "AltGraph"|| event.key ==="Alt")||(event.ctrlKey && event.altKey)){
          altgr=false;
        }
    });

$(document).on("keydown", function(event)
{   
    var altkey = event.key;     
     if((event.key === "AltGraph")||(event.ctrlKey && event.altKey)){
      altgr = true;
     }
     console.log(altgr);
        
    // AltGr+Q
    if(event.which === 81 && altgr)
    {          
        $("#notes").empty('');
        $("#notes").append("Success!<br/>" , " Event: ", event.which, " ctrlKey: ", event.ctrlKey, " Altkey: ", event.altKey);
        return false;
     }
         if(event.which === 87 && altgr)
    {          
        $("#notes").empty('');
        $("#notes").append("Success!<br/>" , " Event: ", event.which, " ctrlKey: ", event.ctrlKey, " Altkey: ", event.altKey);
        return false;
     }
     else
     {
        $("#notes").empty('');
        $("#notes").append("Fail! <br/>" , " Event: ", event.which, " ctrlKey: ", event.ctrlKey, " Altkey: ", event.altKey);
        return false;
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="notes">Click to focus snippet and test keydown event, works well in Explorer/Edge but not in chrome</span>
<div/>

Edited the answer to work for ChromeBook as well where the keydown event.key is altGraph but the keyup for some reason is mapped to "Alt" only. Therefore the if statement is slightly different outerwise the boolean altgr will allways be true if altgr or ctrl + alt has been pressed. — Jonathan, Jun 28 '18 at 07:55

Trying to bind alt gr key and it doesn't work in chrome

1 Answers1