![]() remove ( 'hidden' ) key.innerHTML = e.ke圜ode add ( 'hidden' ) e.ctrlKey ? ctrl.classList. ![]() add ( 'hidden' ) e.metaKey ? meta.classList. add ( 'hidden' ) e.shiftKey ? shift.classList. If not, we have a key combination and can show the appropriate If that's the case, we return the function to stop it. getElementById ( 'alt' ) Īnd as before, we want to listen to the keyDown event. getElementById ( 'shift' ), alt = document. ![]() getElementById ( 'ctrl' ), shift = document. getElementById ( 'meta' ), ctrl = document. getElementById ( 'info' ), meta = document. getElementById ( 'keys' ), info = document. getElementById ( 'key' ), keys = document. We then need to define all these variables in JavaScript. Press a key combi to see the magic □ Meta Ctrl Shift Alt Key Īs you can see, I decided to add all the options and the one key, but they were initially all hidden. So let's first convert our HTML to have all the options available. On the KeyBoardEvent, we get specific data, including the boolean status of the four modifier keys.Ĭheck out this example where I pressed Shift + Meta + f. We don't need to change much in our existing codebase from our standard key detection example. This version will be based on only modifier keys and one specific key.Īlthough we can't combine the regular letters, we can make a combination of these modifier keys.įor instance: metaKey + altKey + d Detecting key combinations in JavaScript Today I want to look at how we can capture some combination of keys. The other day we built this cool tool to detect which key was pressed.Īnd as you may have seen, it could only register one key at a time. Detecting a combination of key presses in Vanilla JavaScript 16 Apr, 2021
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |