5

Situation: I have a keydown handler with a switch for what key is pressed, fairly standard stuff, but when any key is held down the keydown event fires repeatedly (rather than just once when the key is actually pressed).

Why it's a problem: I want to keep the keydown listener active, i.e. be able to detect more than one key being pressed at once, but only have the event fire once per keydown. I will want to do something on the keyup for that keyCode based on the time between down and up, but that timing is getting screwed up because of the multiple firings.

What I've tried: I am currently keeping a list of keyCodes that are down, and checking against those in my keydown handler to keep the default behaviour from happening if the keyCode is in my list. However, the event is still firing very often and I'm concerned about the efficiency/elegance of this solution.

The actual question: Is there a good way to limit firing of the keydown event to just when the key is physically pushed down, or to only listen for specific keyCodes?

2
  • "i.e. be able to detect more than one key being pressed at once" That means what? May 5, 2012 at 23:41
  • For example, hold the 'y' key, then also press and hold the 'o' key. This excludes the solution of removing the keydown event and adding it again after keyup.
    – Piers Mana
    May 5, 2012 at 23:44

4 Answers 4

9

In the keydown handler, check whether the key is the same as the last key handled. If it was, exit early. On keyup, forget the last key handled.

For example:

var lastEvent;
var heldKeys = {};

window.onkeydown = function(event) {
    if (lastEvent && lastEvent.keyCode == event.keyCode) {
        return;
    }
    lastEvent = event;
    heldKeys[event.keyCode] = true;
};

window.onkeyup = function(event) {
    lastEvent = null;
    delete heldKeys[event.keyCode];
};​

Demo here (click on the "Result" panel and hit keys).

0

Define a boolean to record if the key is pressed. Set it to true in the key down event. Have your main loop check if the value is true and handle the event, and set the key pressed to false. Have another boolean to record if the key is released (initially false). If the key-up event fires, set it to released. Only set the key-pressed value to true (in the key down event) if the "released" value is also true.

2
  • This is a pretty good answer. Only thing I was probably add is that I would define an array of objects to store the boolean's in for each key code while it is pressed, and in that object would be [{ "43": true}, ... ] and then just remove that keycode as suggested above.
    – LocalPCGuy
    May 6, 2012 at 0:24
  • This is actually what I'm doing now, sorry if it wasn't clear. I am keeping the 'down' keyCodes stored and removing them on keyup. I'm interested in any alternatives that might be more efficient than checking several times a second against my list of keyCodes.
    – Piers Mana
    May 6, 2012 at 0:29
0

Here is an example of what I think you want to achieve: jsFiddle Example

Currently the combinations CTRL+B is the only one thats detected. Just press some numbers to get a log of the activities. When the key is already pressed down it detects the hold action.

0

This is a more succinct version that will be less error-prone. It does not matter if the current key was the last one held because if the keyup event has yet to fire, then it's still in a keydown state.

var heldKeys = {};

window.onkeydown = function(event) {
    if (heldKeys[event.keyCode]) {
        return;
    }
    heldKeys[event.keyCode] = true;
};

window.onkeyup = function(event) {
    heldKeys[event.keyCode] = false;
};​

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.