Search code examples
jquerygoogle-chromekey-bindings

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


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/>


Solution

  • 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/>