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?

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/

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)