How to track multiple keyboard keys (jquery)

Question

I have a document. bind() listener that gives me the pressed key as an Number. Then I have some if listeners wo execute an action. But this program can only track on key simultaneously.

Answer 1

Indeed... that's weird (this event does not work properly on my mobile thus im not sure if i can help...)
can you do the same test on your pc, then run : "keysdown" in console and paste output here??

Answer 2

(nice one @visph although this does not always respect the keypressing order)

Answer 3

On every key press add the character pressed at the end of a string used to compose keypress sequence. When user input stops, for example, after one second of keyboard being idle, evaluate your conditions on composed string.

Answer 4

onkeyup ->
delete keys[key.which]
.......... (small fix)

Answer 5

then there's no problem!...

string = ""
event = function(e) {
string += e.char
check if w
check if a
check if b......
if string is <> then.....
}

you can check event key and composed string independently on each execution!

Answer 6

https://code.sololearn.com/WnYh0aGsBcVo/#js

Answer 7

Good idea, but this doesn't solve my problem. For example: When w is pressed, i want to execute w() but I want to track other keys too during this time.

Answer 8

ok thank you

Answer 9

(that's not very difficult to add the ability to track order ;))

(small unrelated bug in app' context at onload event code fixed)

Answer 10

Give a link to your code to allow us to investigate in your code context...
But right now, I have to go, so I don't know in how many time I could look at it (but maybe anybody else will help you before ^^)

Answer 11

@VH: there's no need of this fix, if you test for value registered: in my example, I use Array.filter() to get only the keys with true as value ;)

Answer 12

Maybe your initial purpose was not enough accuratly described, or at least not well understood... as while diving in your code (the 'move.js' part -- I had not explored the other parts, no more really run the whole page), I believe that you doesn't not really want to handle the key events to track simultaneous keypress, but rather want to be able to look at keys state at regularly time.

Anyway, you could start with the same base code concept: have an object storing map of keys state, wich you can test at any time, but not only when onkeypress/onkeyup/onkeydown events occurs...

On the other hand, in your code you use JQuery generic .bind() method, wich appears to be deprecated since version 3.0 ( http://api.jquery.com/bind/ ) and should be replaced by the new also generic .on() method (while in my code snippet I used .keyup() and .keydown() specific methods targeting specific event listeners -- I don't use JQuery, I usually code in vanilla JS, so I'm not very aware about JQuery, but I've made some researches to find how to translate to JQuery... but obviously I could be less or more wrong ^^ And in same way, you use e.keyCode || e.which but I'm not sure that's necessary -- as JQuery is intended to handle this kind of crossbrowser specifities under the hood).

So, the code I would suggest (even if I cannot test it in real context):
https://code.sololearn.com/Wze8WJEk4zx9/#js

(well, while working on that new code, I saw where I leave a little mistake in my previous one, explaining why it was buggy when you was attempting to include and adapt it in your code ;P I'm not sure that you need to know details about that, but I will explain further if you ask, even if I had updated my previous code which could be compared to the previous one to be understood ;))

Although, in your actual 'move.js' you just need to keep your draw() function and its initial call: your actual $(document).bind() becomes unnecessary with my last code (as it was already wise with my previous ;)).

Answer 13

Last advice: think at least to azerty keyboard users, beside qwerty users (W becomes Z, S becomes Q, D becomes S and A becomes W)...

Answer 14

@visph I included this code into my code, but there is a bug. For example, when I press a, it logs a. But when I release a and press d, it logs a too.

Answer 15

manuel03.bplaced.net/game/game.html
The code we are talking about is the last piece in move.js
Please do not visit it on mobile devices!