HTML5 Doc - Detecting multiple keys pressed
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.
