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
– Ken White, Commented Mar 10, 2017 at 3: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
– KiRa, Commented Mar 10, 2017 at 3: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
– Ken White, Commented Mar 10, 2017 at 3:15
Multiple keystroke detection is easy if you understand the concept. for concept checkout this answer stackoverflow.com/a/12444641/2960555 — unknownerror
– unknownerror, Commented Mar 10, 2017 at 3:19

synthet1c · Accepted Answer · 2017-03-10 05:01:50Z

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>

Collectives™ on Stack Overflow

How to detect multiple(combination) keyboard press?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related