How to detect a keystroke on the keyboard. ?


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

Thank you for your help !

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.

I found the post…
i don’t know if it is similar to your needs…

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

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

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

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

I have try something like$w/keyboardevent/key

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


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(() => {

Custom Code - Head (Wix Dashboard):

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

HTML1 code

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

 <body onload="init();">

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


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

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.

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.


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

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

It’s time for some new APIs :grin::grin::grin:

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.


Put your wish onto the Velo-Wishlist…

1 Like

Done :wink: