Count how many keys are pressed at the same time in JavaScript

Question

Is it possible to count how many keys are pressed at the same time? I've come quite far but I get some unwanted behavior when tabbing away from my browser window. If I hold down x number of keys when tabbing away from the browser window and then release the keys in a different window the numKeys array stays the same when I tab back to the browser window. Maybe you can check how many keys are pressed when returning to the browser window or something?

My code so far:

var numKeys = []; $(document).keydown(function(e){ if(numKeys.indexOf(e.keyCode) == -1){ numKeys.push(e.keyCode); } document.getElementById('test').innerHTML = numKeys.length; }); $(document).keyup(function(e){ if(numKeys.indexOf(e.keyCode) > -1){ var index = numKeys.indexOf(e.keyCode); if(index > -1){ numKeys.splice(index, 1); } } document.getElementById('test').innerHTML = numKeys.length; });

You could just reset all the keys if the user tabbed out like in the code here. There isn't really a way to know what the user does in another window — Some Guy
– Some Guy, Commented Jul 24, 2014 at 10:15
I'm grateful to SO for bringing all these crazy ideas ;) Check this out jsbin.com/xemegudu/1/edit - 'cause I'm not sure about your goal, and I'm finding so hard to press several keys at (exactly) the same time. — hex494D49
– hex494D49, Commented Jul 24, 2014 at 10:29
... and I expect +1 from you guys at least because I managed to lock up my keyboard trying to make your crazy ideas came true ;)) — hex494D49
– hex494D49, Commented Jul 24, 2014 at 10:51
@SomeGuy your answer helped me solve my issue. If you put it up as an answer I'll accept it. — Daniel Tovesson
– Daniel Tovesson, Commented Jul 24, 2014 at 12:03

Youness · Accepted Answer · 2014-07-24 10:30:25Z

3

try this (UPDATE):

var cpt = 0; var codes = ""; $(function () { $(document).keydown(function (e) { if (codes.indexOf(";" + e.keyCode + ";") == -1) { cpt++; codes += ";" + e.keyCode + ";"; } }); $(document).keyup(function (e) { var tmp = ";" + e.keyCode + ";"; if (codes.indexOf(tmp) != -1) { cpt--; var part1 = codes.substring(0,codes.indexOf(tmp)); var part2 = codes.substring(codes.indexOf(tmp)+tmp.length ); codes=part1+part2; } }); });

The new Working ;) link : FIDDLE

edited Jul 24, 2014 at 10:30

answered Jul 24, 2014 at 10:09

Youness

1,4951 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tohveli Over a year ago

But it just tells how many have been pressed, not the current number. If I press A, S and D and release D, it would still show 3.

hex494D49 Over a year ago

Your jsFiddle isn't related to your snippet :)

hex494D49 Over a year ago

My keyboard is beeping like crazy; +1 even I can't test it with more than four keys (just as I couldn't using my snippet)

Youness Over a year ago

normal keyboards dosn't support holding more than 3 or 4 keys if you have to hold down more consider to buy an gamer keyboard

Some Guy · Accepted Answer · 2014-07-24 12:08:01Z

A simple solution to your problem would be to clear the keys pressed when the user leaves the tab. You can use the window.onblur event like this:

window.onblur = function () { numKeys = []; };

Demo.

Note that this solution will not be aware of keys you press in another window. (For example, you press "up" in another window, and then select this window again)

Kousha · Accepted Answer · 2014-07-24 10:37:53Z

Let's keep it very simple. Idea is to set the keys with the object being event.keyCode to true on keydown, and delete on keyup. Then count the instances of true in keys,

var keys = []; $(function () { $(document).keydown(function (event) { keys[event.keyCode] = true; var count = 0; for (var i = 0; i < keys.length; i++) { if (keys[i]) count++; } console.log(count); }); $(document).keyup(function (e) { delete keys[e.keyCode]; }); });

hex494D49 · Accepted Answer · 2014-07-24 11:37:49Z

I decided to share my snippet mentioned and linked just a few minutes before in the comments above. But, just to make it clear, I'm finding hard to press / accept by the keyboard more than four, maybe five keys at the same time and that's why all these attempts might be useless :)

window.onload = function(){ var a = []; var log = document.getElementById("keys"); document.body.onkeydown = function(event){ var keyCode = ('which' in event) ? event.which : event.keyCode; if(a.indexOf(keyCode) == -1) a.push(keyCode); log.innerHTML = a.length + " | " + a.join(); return false; }; document.body.onkeyup = function(event){ a = []; log.innerHTML = a.join(); }; };

Working jsBin

Collectives™ on Stack Overflow

Count how many keys are pressed at the same time in JavaScript

4 Answers 4

4 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Related