How to detect a keystroke on the keyboard. ?

Ask the community
,
1

Hi,

I want to use spacebar or arrows keyboard press to trigger actions.
How to with Velo, or HTML iFrame ?

Thank you for your help !
Ben

2

I think i saw a post just 1 or 2 days ago, where someone used an custom element to do that, what you want.

Search the last posts for about 2-days, perhaps you are lucky and will find that one post, which could be interessting for you.

3

I found the post…
i don’t know if it is similar to your needs…
https://www.wix.com/velo/forum/community-discussion/custom-element-dispatch-event

EDIT:
Here on that site, you can see an example of what is possible to create his own SITE-MENU…

https://www.media-junkie.com/pflegeservice

770×290 64.6 KB

It’s not working perfect yet, still in developement :grin: so sorry for the bugs :roll_eyes:

4

Thank You. I’ll have a look :slight_smile:

5

Sorry, the edited info was for another post (wrong post, sorry) :sweat_smile:

6

https://www.w3.org/2002/09/tests/keys-cancel2.html

I have try something like

https://www.wix.com/velo/reference/$w/keyboardevent/key

**NOTE: You can track event in DOM so you can track it at anytime without need of “input” box

Here is an example of HOW TO INTERACT WITH DOM EVENT with PAGE ELEMENT

I take Tidio (chat) as example, it enable us to “expand” the chat box after clicking an page element.

Page Code: (Partial)

$w.onReady(function () {
 /* Tidio */
    $w('#chat').onClick(() => {
        $w('#html1').postMessage("Tidio");
    })

Custom Code - Head (Wix Dashboard):

<script src="//code.tidio.co/XXXXXXXXXXXXX.js" async></script>
<!-- Swap your javascript code above -->
<script>
   (function() {
    function onTidioChatApiReady() {
      (function() {
          window.tidioChatApi.open();
      })();
    }
    if (window.tidioChatApi) {
      window.tidioChatApi.on("ready", onTidioChatApiReady);
    } else {
      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
    }
  })();
</script>
<script>
window.onmessage = event => {
if (event.data == "Tidio"){
            tidioChatApi.open() 
}        
    }
</script>

HTML1 code

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

 <body onload="init();">

<script type="text/javascript">
function init () {// when a message is received from the page code
 window.onmessage = (event) => {
 if (event.data) {    window.parent.postMessage(event.data, "*");
    }
  }
}
function insertMessage(msg) {
 window.parent.postMessage(msg, "*");
}


</script>
 </body>
</html>
7

In your case, key press event on “HEAD”
recieve event via “HTML”
run page event via “Page Code”

8

You might be able to use the Page’s onClick() event handler . It will trigger on key clicks on the page. If a page element has a key click event handler, that will override the page’s key clicks.

9

Hi Yisrael,
Thank you for your answer.

I would like to trigger from keyboard keys, not from element’s click.
For example, show an hidden image when spacebar is pressed.

Ben

10

Indeed. Sorry, I apparently wasn’t paying close enough attention.

There really isn’t any way to capture keypresses from the page.

11

@yisrael-wix
It’s time for some new APIs :grin::grin::grin:

12

Hi Ysrael,

Any technical reason for this limitation ?
I’m just a newbie in programming, but this seems basic need to get a responsive website.
Thank You for your interest.

Ben

13

Put your wish onto the Velo-Wishlist…
https://www.wix.com/corvid/wishlist

14

Done :wink: