Not having success with Keydown and Keyup events. Could use some help.
I 've not been having any success with the keydown and keyup events and could use some help . Basically , my setup involves a modal created such that I 'm using the top div of the modal as an overlay (absolute and 100vh , 100vw ) and then the div within this has the modal background (canvas ) . I 'd like it so that whenever this modal is visible , the user could press the Esc key to hide the modal . I 've tried setting keydown and keyup events to the modal (the top element overlay ) but those neither of those events aren 't detected (I 've logged to the console and see nothing ) . Could I be setting the keydown event on the wrong element ? FYI , my modal isn 't a component - - it 's just a transparent div within the main structure that has absolute position and 100vh , 100vw and within this div is my modal background . One way to go about it that I found simple to implement was to go with a custom action function listenForKeyPress ( ) { document .addEventListener ( 'keypress ' , function (event ) { const keyValue = event .key ; ctx .triggerActionEvent ( 'keyValue ' , keyValue ) ; } ) ; } Run the action onLoad and use a switch condition to run your logic toddle custom actions use args and ctx objects to bring data into and out of the function triggerActionEvent is a function to pass the data into toddle For a div to be able to listen for keydown events , it needs to be in focus Here 's an example When the div is in focus , the background turns green and it shows the key pressed Otherwise it is grey and it doesn 't record key values Which is handy for many reasons lol
.jpeg/public)