Detecting duration of key-press using JavaScript

Question

I'm very new to JavaScript, sorry if this is a dumb question, I haven't been able to find a good answer online.

I'm currently using:

document.body.addEventListener("keydown", function(e) { keys[e.keyCode] = true; });
document.body.addEventListener("keyup", function(e) { keys[e.keyCode] = false; });

to detect user input, which works quite well for my purpose, but I can't think of a good way to figure out how long a key has been pressed down.

I've tried putting a while-loop that exits if keys[index] returns false and increments a counter in the loop, but that just seems to break the script. I'm guessing I could write a function that specifically detects if the key I want has been released, but I'm not sure how to go about that properly.

Additionally, I only need to check it for one key.

Answer 1

Instead of setting boolean values, set a timestamp on keydown, then retrieve it and compare against the current timestamp on keyup:

 const signalKeypressDuration = (key, duration) => { console.log(`Key ${key} pressed for ${duration} ms`); }; const keys = {}; document.body.addEventListener("keydown", ({ key }) => { if (!keys[key]) keys[key] = Date.now(); }); document.body.addEventListener("keyup", ({ key }) => { signalKeypressDuration(key, Date.now() - keys[key]); keys[key] = null; });

Answer 2

Instead of putting in true in keydown , put new Date() . Instead of putting in false in keyup , calculate new Date() - keys[e.keyCode] and store it somewhere.