使用 JavaScript 检测 AltGr 键

Question

我怎样才能弄清楚 ALT+CTRL 和 ALTGR 按键？

我在这里找到了这个代码作为可能的解决方案，但它不起作用：

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

}

此代码适用于 alt+ctr 和 altGr。

我有这样的情况：对于alt+ctrl+e（例如e，没关系）我想要一件事并且对于 altGr+e 另一个，我该怎么做？

如果有人有什么想法，请告诉我。

Answer 1

您可以通过event 对象中的location 属性的值来检测按下了哪个键（从右键或左键）。如果 location 属性的值为 1 (e.location=1)，则按下左键。如果值为 2，则按下右键。

这里我提供了 RightAlter+RightCtrl+<any_valid_key> 的代码

检查这个例子

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>

为什么要附加 keyup 事件监听器？

这里我们必须检测按下 Ctrl 和 Alt 键时的键位置（在 keydown 事件中）。我们必须将它存储在标志变量中并使其为真。当键被释放时（在 keyup 事件上）必须标记为 false。否则，这些标志始终保持为真。在下一次按键时它将始终为真

Answer 2

您可以使用该位置来确定按下的是哪个 alt。 为了支持 Alt+Ctrl，我们将保存按下 Alt 的最后位置。

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

然后，一旦同时按下 Alt 和 Ctrl，就做你的事。在本例中，我们将只在结果 div 中写入 Alt 端。您也可以添加“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

严格按照您的问题，这里是两种必需情况的代码：

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

现在分解这里发生的事情。 keydown 允许您检测多个按键。

首先我们检查是否按下了 Alt 和 E 键。如果是，我们继续检查 Ctrl 键是否也处于活动状态，并根据需要采取适当的措施。