I'm trying to capture certain keydown events in my application but only if no "control" keys have been held down at the same time. I don't want to run into issues with screen reader keyboard shortcuts. Shift, Ctrl and Alt are easy to check for because they're on the javascript event, but I also need to check for Ins and Windows keys as well as any Mac control keys.

This is what I've got so far and it works as expected, but my event is still triggered when Ins or Windows is held down.

handleKeydown: function(event) {
  var boKeyPressed = event.ctrlKey || event.shiftKey || event.altKey;
  if(!boKeyPressed && event.keyCode === $.ui.keyCode.HOME) {
    event.preventDefault();
    this.$('>ul>li:last').attr('tabindex', -1);
    this.$('>ul>li:first').attr('tabindex', 0).focus();
  } else if (!boKeyPressed && event.keyCode === $.ui.keyCode.END) {
    event.preventDefault();
    this.$('>ul>li:first').attr('tabindex', -1);
    this.$('>ul>li:last').attr('tabindex', 0).focus();

  }
}

Is there a way to check for other control keys easily or do I need to capture those events and hold onto them in some global Boolean like this.isInsertPressed?

I'm trying to capture certain keydown events in my application but only if no "control" keys have been held down at the same time. I don't want to run into issues with screen reader keyboard shortcuts. Shift, Ctrl and Alt are easy to check for because they're on the javascript event, but I also need to check for Ins and Windows keys as well as any Mac control keys.

This is what I've got so far and it works as expected, but my event is still triggered when Ins or Windows is held down.

handleKeydown: function(event) {
  var boKeyPressed = event.ctrlKey || event.shiftKey || event.altKey;
  if(!boKeyPressed && event.keyCode === $.ui.keyCode.HOME) {
    event.preventDefault();
    this.$('>ul>li:last').attr('tabindex', -1);
    this.$('>ul>li:first').attr('tabindex', 0).focus();
  } else if (!boKeyPressed && event.keyCode === $.ui.keyCode.END) {
    event.preventDefault();
    this.$('>ul>li:first').attr('tabindex', -1);
    this.$('>ul>li:last').attr('tabindex', 0).focus();

  }
}

Is there a way to check for other control keys easily or do I need to capture those events and hold onto them in some global Boolean like this.isInsertPressed?

• javascript
• jquery
• events
• keydown

• This answer is being dated. Please see below on how to use event.key instead. – Jeff R Commented Mar 24, 2021 at 19:11

3 Answers 3

Use event.key and modern JS!

No number codes anymore. You can check for Insert key directly.

let isInsertDown = false;
document.addEventListener("keydown", ({key}) => {
    if (key === "Insert") {
        isInsertDown = true;
    }
});
document.addEventListener("keyup", ({key}) => {
    if (key === "Insert") {
        isInsertDown = false;
    }
});

Mozilla Docs

Supported Browsers

You could do something like this:

var keysPressed = {};
var keys = { insert: 45 };    
$(window).keydown(function(e) { keysPressed[e.which] = true; });
$(window).keyup(function(e) { keysPressed[e.which] = false; });

And then later:

if (keysPressed[keys.insert]) {
    // insert key is currently down
}

Use keycode property in the Event object

if(event.keyCode === 45) // Insert Key