CODEWITHSUNDEEP
javascriptjquery
KiRa
KiRa

Reputation: 924

How to detect multiple(combination) keyboard press?

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

  1. Alt + 1 -- I want to alert something
  2. 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

Upvotes: 2

Views: 422

Answers (1)

synthet1c
synthet1c

Reputation: 6282

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>

Upvotes: 1

Related Questions