I know there are similar questions, but I could not find the answer, and I am trying to create an uncommon shortcut in order to execute action according to a specific combination of keys. I don't have an example, since I have not implemented it, I am trying to figure out if I can do it or not. I have a combination of Ctrl, shift, alt, meta keys, I can capture in javascript, my problem, is that I want to use a common key like "g" and make it behave like Ctrl, shift, alt, meta, etc, in order to combine with a key F1, F2, F3 to execute a javascript function with an specific visual component on screen. An Example, I intend to create a shortcut "Ctrl+1+F1" to perform an action in a specific table in a web page showing with more than one table on the html. Can Anyone answer me if this can be done? if someone can, How can I do it?
3 Answers
A broad overview of the algorithm would be as follows:
Keep a Set-type variable that will contain all currently pressed keys. Whenever you get a keydown/keyup event, update that set by adding/removing whatever key was pressed/released. Attach the event handlers as high as you can - for example, on the <body> tag, so that you can catch everything that happens in your page.
Then at the end of the keydown event you should check if the variable contains EXACTLY the keys that your keyboard shortcut requires. If they do, launch the action. In practice you'll probably have a long list of possible keyboard shortcuts. Check them all. Maybe you'll also need extra checks, like some shortcuts could only be active when a certain control is focused or when something is in the right state or whatever.
As a variation, you might want to launch the action not when the keys are pressed, but when they are released. In that case, don't launch the action immediately, but make some sort of note in another variable, that such-and-such combination was pressed. Then wait until all the keys are released (the set is empty), and THEN launch the action. If some other keys got pressed inbetween, clear that note and check if perhaps another combination should be activated instead. Store that in the note-variable and keep waiting.
Comments
Unfortunately, the Control keys and the Function keys seem to be mutually exclusive. You can set up key combos with any number of keys, as in the following example, but combining Control and Function doesn't work (on my system anyway).
const result = document.querySelector('#result')
const keys = {}
window.addEventListener('keydown', (ev) => {
keys[ev.key] = true
})
window.addEventListener('keyup', (ev) => {
if (keys['1'] && keys['Control'] && keys['F1']) {
console.log('This does not work on my system')
} else if (keys['1'] && keys['F1']) {
result.value = "F1 + 1 pressed!"
} else if (keys['Control'] && keys['o'] && keys['p']) {
result.value = "Control + o + p pressed!"
} else {
setTimeout(() => result.value = "", 500)
}
keys[ev.key] = false
})<p>Click in the result pane and then press F1+1, or Control+o+p. Control+F1+1 does not work.</p>
<input id="result">
3 Comments
tabindex solution does not really answer the question as posed, but if it solves your problem, that's great :)Thanks to everyone, compiling the answers given, i was able to solve the problem. i had to give the focus to the table (courtesy of kosh, who gave the straight answer i needed), and on the post(event) of the web page, i was capable to catch the active component. I can not post the solution i built, because the code belongs to the company, but i will try to build an example, and post on monday, in case someone else reaches this post after the same doubt (easter in brazil, and tomorrow i am travelling home, thats why the example i will show only on monday). Thanks to everyone again.
gkey like you can capture thectrlkey. You should try to implement something and check where it blocks. From there, we can help you with that specific problem.keydownandkeyupevents and keeping track of what is pressed and what is not.