javascript - 如何检测多个(组合)键盘按下？

Question

我觉得这段代码很有趣，因为每次我按下键盘上的一个键时，它都会提醒它。但是如何检测组合键

示例

1. Alt + 1 -- 我想提醒一些事情
2. Alt + 2 -- 同上

等等。我想要的任何组合。

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

归功于 Coyod

Answer 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
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是一个更好的例子，它会保持所有按下的键的状态，让你可以测试是否同时按下了多个键。在回调中，您有一个函数 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))
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>