How to add onKeyPress event listener to Document using velo

Ask the community
,
1

Hello, I would like to add a onKeyPress event listen to an entire page. I’ve tried to add it through referencing the Document (see below) but I’m getting an error that an onKeyPress cannot be added to this element. I’m writing a script that is supposed to trigger an audio clip whenever a user enters a sequence of keystrokes. Below is what I was using.

$w ( “Document” ). onKeyPress

2

I think you’ll have to crate window.addEventListenter via Custom Element, and once it fires - dispatch the event to the page code.
(It will only work if you have your site connected to your own domain (and I don’t think it will work well in Preview Mode. Only on live site).

https://support.wix.com/en/article/velo-about-custom-elements

https://www.wix.com/velo/reference/$w/customelement/on

3

So I won’t be able to test it on a wix domain then? I’m building this for a client and trying to avoid a subscription.

4

No, it will only work on your own domain and not on Wix domain.

5

Would something like this work?

let audio = document . getElementById ( “myAudio” );

let audioLink =
“https://static.wixstatic.com/mp3/6f0e84_83df017b3f1f48cb8926339d3131854a.mp3” ;
const sequence = [
“arrowup” ,
“arrowup” ,
“arrowdown” ,
“arrowdown” ,
“arrowleft” ,
“arrowright” ,
“arrowleft” ,
“arrowright” ,
“b” ,
“a” ,
];
const keyStrokes = ;
let audioIsPlaying = false ;

const clearArray = () => {
while ( keyStrokes . length > 0 ) {
keyStrokes . pop ();
}
};
const compareKeyStrokesToSequence = () => {
let sequenceIsEqual = true ;
for ( let i = 0 ; i < 10 ; i ++ ) {
if ( keyStrokes[i ] !== sequence[i ]) {
sequenceIsEqual = false ;
break ;
}
}
if ( sequenceIsEqual ) {
audio . play ();
audioIsPlaying = true ;

setTimeout (()  =>  { 
  audioIsPlaying  =  false ; 
},  35000 );

}
clearArray ();
};

const keydownHandler = ( root ) => ( event ) => {
if ( audioIsPlaying === false ) {
if ( keyStrokes . length !== 9 ) {
keyStrokes . push ( event . key . toLowerCase ());
} else {
keyStrokes . push ( event . key . toLowerCase ());
compareKeyStrokesToSequence ();
}
console . log ( keyStrokes );
}
};
class customKeyPressElement extends HTMLElement {
constructor () {
super ();

document . addEventListener ( "keydown" ,  keydownHandler ( this ),  { 
  capture:  false , 
  passive:  true , 
});

}
}
customElements . define ( “key-press-element” , customKeyPressElement );

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
})
})
7

Ahh okay, thank you so much! I will test this out

8

You’re an absolute life saver. Thank you so much. Just finished testing!!!