HTML5 Doc - Detecting multiple keys pressed

[KeelyM]

Hi, I'm working on an HTML5 document in Adobe Animate and I'm trying to detect multiple keys being pressed at the same time to fire off a function.

Essentially I have a menu with 5 different options that take you to different pages (I'm using this in tandem with Captivate to navigate through captivate slides) - I'd like the menu to be keyboard accessible and I already have another menu in my project that uses singular number keys to select the options (or I would just use singular numbers again).

I'm looking to do something like the e key and the number 1 key pressed together go to option one, e+2 pressed together go to option two, etc. Here are the two methods I've tried.

First method:

var map  = {}; 
function keyExerciseTwo(e){
e = e || event; 
map[e.keyCode] = e.type == 'keydown';
if (map[69] && map[50]){
alert ("Exercise two pressed!");
}
}
function keyExerciseThree(e){
e = e || event; 
map[e.keyCode] = e.type == 'keydown'; 
if(map[69] && map[51]){
alert("Exercise three pressed!");
}
}

It kind of works, I hit e+2 and get the Exercise Two alert. Then I'll hit e+3 and I'll get an alert saying two was pressed, then one saying three was pressed, then a couple more of each (after only hitting once).

Second Method:

var map = {50: false, 51:false, 69:false};
$(document).keydown(function(e){
if (e.keyCode in map) {
map[e.keyCode] = true;
if (map[50] && map [69]) {
alert ("Exercise two pressed");
}
}
}).keyup(function(e) {
if (e.keyCode in map) {
map[e.keyCode] = false;
}
});
$(document).keydown(function(e){
if (e.keyCode in  map) {
map [e.keyCode] = true;
if (map[51] && map [69]) {
alert ("Exercise three pressed");
}
}
}).keyup(function(e) {
if (e.keyCode in map) {
map[e.keyCode] = false; 
}
});

This method pretty much gives the same results as the first one.

I understand javascript a little bit, but I'm not good enough to understand these completely. I found both of these methods from searching through forums, etc.

Any advice would be greatly appreciated!

Thanks.

[avid_body16B8]

I would not use a number key but rather 2 letters for example here e and d:

(see tutorial here: https://www.kirupa.com/html5/keyboard_events_in_javascript.htm )

window.addEventListener("keydown", keysPressed, false);
window.addEventListener("keyup", keysReleased, false);
var keys = [];
function keysPressed(e) {
    // store an entry for every key pressed
    keys[e.keyCode] = true;
    // Ctrl + Shift + 5
    if (keys[69] && keys[68] ) {
        alert("done");
    }
}
function keysReleased(e) {
    // mark keys that were released
    keys[e.keyCode] = false;
}

[ClayUUID]

Using E as an ad hoc modifier key sounds like a perfectly dreadful bit of UX, not least because it would be unusable by people who can't press and hold two keys at the same time.

Why does using the number keys in another menu disallow also using them in this menu?

[KeelyM]

You bring up a good point. The other menu is an overlay sort-of menu that is present throughout the entire Captivate course and allows users to jump to different units. Since it's always present, the keys 1-5 would always trigger it. I suppose I could edit that menu so the 1-5 keys only trigger when the menu is open, that might be the better option now that I think about it. Then when the menu is closed, and the user is on the slide with this menu, the numbers trigger the correct one. I'm just afraid someone would have both menus open at the same time then the number key would trigger both?? or neither?? I'm not sure how that would work.

[avid_body16B8 · Accepted solution]

Could you not use letters so you do not have a conflict with the other menu?