How to detect multiple(combination) keyboard press?

Question

I find this code interesting because every time I press a key from my keyboard it alerts it. However how to detect a key with combination

Example

Alt + 1 -- I want to alert something
Alt + 2 -- same here

ETC. Any combination that I want.

I try his code and create an if statement to it

$(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>

Credit to Coyod

That's not a multiple key press. It's a key press with a modifier. The modifiers are Control, Alt and Shift. That terminology may help you with a search. — Ken White, Mar 10 '17 at 03:11
@KenWhite `Alt` is just my example. However it is possible to detect it?. If I press `A` and `B` at the same time I want to alert something — KiRa, Mar 10 '17 at 03:13
You can't press A and B at the same time; only one will be recognized. There's no such thing as an *AB* key. You **can** press a modifier key* and another key at the same time. Look at the other parts of `event`, like `event.altKey` (which tells you if Alt was down when the key was pressed). Modifier keys *modify* the key that was pressed when they were down. — Ken White, Mar 10 '17 at 03:15
Multiple keystroke detection is easy if you understand the concept. for concept checkout this answer http://stackoverflow.com/a/12444641/2960555 — unknownerror, Mar 10 '17 at 03:19

synthet1c · Accepted Answer · 2017-03-10T05:01:50.393

If you change the event to keydown you will get extra event data that will tell you if any modifier keys are pressed.

Then inside the event callback you can check event.altKey to check if the alt key is currently pressed.

$(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>

Here is a better example that will keep the state of all pressed keys, allowing you to test if more than one key is pressed at the same time. In the callback you have a function checkKeysPressed which takes the keys you wish to add the event for, if those keys are pressed the function will return true.

It's using ES6 syntax, functions and objects, but it could be converted to ES5 easily or just run through 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>

How to detect multiple(combination) keyboard press?

1 Answers1