Detect double Ctrl keypress in JS

Question

I have a custom CMS and would like to add a "shortcuts menu" triggered by the pressing of the Ctrl key twice within, say, 300 milliseconds. I use prototype, so my starting point obviously is:

Event.observe(document, 'keypress', function(event)
  { if(event.keyCode == Event.KEY_XYZ) { show_shortcuts});

My approach at the moment would be populating a global variable with the current time in milliseconds, and checking on each keypress whether a keypress has happened less than 300 milliseconds ago.

But maybe there is a more elegant solution?

Bristling

cant believe @Bristling 웃 have a question without upvote, was the first lol, and also found useful this question i was looking for double shift – Lechery

Answer 1

This should work. Maybe add some further checking if not some other key like Alt or Shift are pressed at the same time. Hope it is self explanatory, if not just ask and I provide clarification.

var dblCtrlKey = 0;
Event.observe(document, 'keydown', function(event) {
  if (dblCtrlKey != 0 && event.ctrlKey) {
    alert("Ok double ctrl");
    dblCtrlKey = 0;
  } else {
    dblCtrlKey = setTimeout('dblCtrlKey = 0;', 300);
  }
});

https://jsfiddle.net/3tc26g7x/

Tibia

It works, however it fires also when the Ctrl key remains pressed for 300 milliseconds. I will have to add a "keyup" checker but this will serve as a basis for it. Cheers! – Bristling

It doesn't fire for me when key remains pressed. Might be browser specific (I'm using Opera) – Tibia

@Bristling just use keyup instead ;-) – Cahill

@Tibia i did try your solution however upon pressing ctrl even once the dblCtrlKey value prints as 139. I wonder what am i missing. If you have a demo for the snipped, i'd really appreciate. – Carricarriage

@Carricarriage added a jsfiddle. The value of the dblCtrlKey variable is irrelevant – Tibia

Answer 2

function doubleControlEvent() {
  if (event.key === 'Control') {
  	timesCtrlClicked++
    if (timesCtrlClicked >= 2) {
      console.log('Double control')
      // Double Crtl is clicked add your code here
    }
    setTimeout(() => (timesCtrlClicked = 0), 200)
  }  
}

let timesCtrlClicked = 0;
document.addEventListener('keyup', doubleControlEvent, true)

Thomey