How to add onKeyPress event listener to Document using velo

Ask the community
,
6

(It’s hard to read)
Anyway I don’t think it will work this way, since the html id of the video is not ‘myVideo’) + from other reasons.
I think the easiest way will be to have no visible UI in the custom element, just the event listener, once fires it will dispatch the event to the page code and you will continue from there with Velo.

something like:

//custom element file:
class CustomKeyPressElement extends HTMLElement {
connectedCallback(){
document.addEventListener("keydown", event => this.dispatchEvent(new CustomEvent("keydown", {detail: event.key}))
)
}
}
customElements.define("key-press-element", CustomKeyPressElement);

Then in the on the page, use:

//page code

$w.onReady(() => {
$w("#customeElement").on("keydown", event => {
//continue from here
})
})