How to track the time of the pressed button? JavaScript

Question

I need your help. With the help of the following code, I am trying to detect the time that the Delete key was pressed. My code doesn't give me any errors, but it doesn't work quite right. For example, if I press the key for 3 seconds, it shows a completely different time than it should. Tell me what I am doing wrong, what is my mistake? Thank you very much?)

var startTime;

document.body.onkeydown = function() {
   const key = event.key;
   if (key === 'Delete') {
      console.log('key down');
      startTime = +new Date();
   }
}

document.body.onkeyup = function() {
   const key = event.key;
   if (key === 'Delete') {
     console.log('key up')
     var endTime = +new Date();
     var time = (endTime - startTime) / 1000;
     if (time > 3) {
        console.log('cool')
     }
    console.log(time + ' sec');
   }
}

`shows a completely different time`...give an example: what time did you expect? What time did you actually get? — ADyson, Jul 13 '22 at 16:51
Does this answer your question? [Prevent JavaScript keydown event from being handled multiple times while held down](https://stackoverflow.com/questions/6087959/prevent-javascript-keydown-event-from-being-handled-multiple-times-while-held-do) — skara9, Jul 13 '22 at 17:03
use this condition in both function keydown and keyup `key === 'Delete' || key === 'Backspace'` — Mohit Sharma, Jul 13 '22 at 17:04
@ADyson I had i time less than 1 second every time. Maybe it was i time pressing button — Dmitry Chernyak, Jul 13 '22 at 17:28

score 1 · Accepted Answer · answered Jul 13 '22 at 17:25

1

You can ignore multiple repetitions using a little flag you set up.

var startTime;
var delete_down = false;

document.body.onkeydown = function(ev) {
  const key = event.key;
  if (key === 'Delete') {
    ev.preventDefault();
    if (delete_down) {
      return
    }
    delete_down = true;
    console.log('key down');

    startTime = +new Date();
  }
}

document.body.onkeyup = function() {
  const key = event.key;
  if (key === 'Delete') {
    console.log('key up')
    delete_down = false;
    var endTime = +new Date();
    var time = (endTime - startTime) / 1000;
    if (time > 3) {
      console.log('cool')
    }
    console.log(time + ' sec');
  }
}

click me then hit [Del]

answered Jul 13 '22 at 17:25

IT goldman

14,885
2
14
28

Thank you)) It works fine, what i needed? Where was my mistake? – Dmitry Chernyak Jul 13 '22 at 17:27
1

As been suggested in the comments, the event is re-triggered many times while key is down. So solution was to ignore all of them after the first one. – IT goldman Jul 13 '22 at 17:36
Only one more question, how to clear this pressed time? – Dmitry Chernyak Jul 14 '22 at 06:06
If you want to remove the events then `document.body.onkeydown=null`. Note that I `ev.preventDefault();` If [Del] was pressed, maybe that wasn't your intention. – IT goldman Jul 14 '22 at 06:58
My question is that I am using this code in Angular Typescript. And the time I have, when it is pressed every time, is added – Dmitry Chernyak Jul 14 '22 at 07:29
What is the desired behavior? – IT goldman Jul 14 '22 at 08:01
The following behavior is desired: I press the key and wait 3 seconds. When I press again, the time starts from zero and wait 3 seconds again. For some reason, when I click again, my time adds up If comments are blocked, please write to dcheyrnak10@gmail.com – Dmitry Chernyak Jul 14 '22 at 08:29
I want to see the time the button was pressed, every time I press it – Dmitry Chernyak Jul 14 '22 at 09:50
I'm sorry don't understand. But take my code as example it's understandable. Try to build upon it, or [edit] your question so it would be more clear. – IT goldman Jul 14 '22 at 10:14

How to track the time of the pressed button? JavaScript

1 Answers1