CODEWITHSUNDEEP
javascriptuser-input
nullcline
nullcline

Reputation: 352

Detecting duration of key-press using JavaScript

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.

Upvotes: 2

Views: 1368

Answers (2)

Amadan
Amadan

Reputation: 198324

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.

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370689

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;
});

Upvotes: 9

Related Questions