如何检测多个（组合）键盘按下？答案

【问题标题】：How to detect multiple(combination) keyboard press?如何检测多个（组合）键盘按下？
【发布时间】：2017-07-31 06:30:03
【问题描述】：

我发现这段代码很有趣，因为每次我按下键盘上的一个键时，它都会发出警报。但是如何检测组合键

示例

Alt + 1 -- 我想提醒一些事情
Alt + 2 -- 此处相同

等。我想要的任何组合。

我尝试他的代码并为其创建一个 if 语句

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
 if( String.fromCharCode(event.which) == "a"){
 	alert("Hi A.");
 }
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

感谢Coyod

【问题讨论】：

这不是多次按键。这是一个带有修饰符的按键。修饰符是 Control、Alt 和 Shift。该术语可能会帮助您进行搜索。
@KenWhite Alt 只是我的例子。但是有可能检测到吗？如果我同时按下A 和B，我想提醒一些东西
不能同时按A和B；只有一个会被识别。没有 AB 键这样的东西。您可以同时按下修饰键*和另一个键。查看event 的其他部分，例如event.altKey（它告诉您按下键时Alt 是否按下）。修饰键修改按下时按下的键。
如果您了解这个概念，那么多次击键检测很容易。对于概念检查这个答案stackoverflow.com/a/12444641/2960555

标签： javascript jquery

【解决方案1】：

如果您将事件更改为keydown，您将获得额外的事件数据，这些数据会告诉您是否按下了任何修饰键。

然后在事件回调中，您可以检查event.altKey 以检查当前是否按下了 alt 键。

$(document).keydown(function(event) {
  if (event.altKey) {
    switch (String.fromCharCode(event.which)) {
      case 'A':
        console.log('Hi A')
        break
      case 'B':
        console.log('Hi B')
        break
    }
  }
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

这是一个更好的示例，它将保留所有按下的键的状态，允许您测试是否同时按下了多个键。在回调中，您有一个函数 checkKeysPressed，它获取您希望为其添加事件的键，如果按下这些键，该函数将返回 true。

它使用 ES6 语法、函数和对象，但它可以很容易地转换为 ES5 或只通过 babel 运行。

const multipleKeysEventListener = (element, callback) => {
  
  const keysPressed = new Set
  
  const describeKey = e => {
    switch(e.which) {
      case 18:
        return 'ALT'
      case 16:
        return 'SHIFT'
      default:
        return String.fromCharCode(e.which)
    }
  }
  
  const checkPressedKeys = (...keys) =>
    keys.every(x => 
      keysPressed.has(
        typeof(x) === 'number'
          ? String.fromCharCode(x)
          : x
      )
    )
  
  const down = e => {
    keysPressed.add(describeKey(e))
    return callback(checkPressedKeys, e)
  }
  
  const up = e => {
    keysPressed.delete(describeKey(e))
  }
  
  $(element).keydown(down)
  $(element).keyup(up)
}

multipleKeysEventListener(document, (checkKeysPressed, e) => {
  switch (true) {
    // you can pass keys
    case checkKeysPressed('A', 'B'):
      console.log('A and B pressed')
      break
    // you can pass modifiers
    case checkKeysPressed('ALT', 'A'):
      console.log('ALT and A pressed')
      break
    // and you can pass keyCodes
    case checkKeysPressed('ALT', 67):
      console.log('ALT and C pressed')
      break
    default:
      console.log(String.fromCharCode(e.which))
  }
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：