Arrow Key Navigation

Ask the community
,
1

Total programming beginner here, can’t seem to figure out how I can get an arrow key to trigger a button that is on the page. Alternately the arrow key press wouldn’t need to be linked to a button if it could just execute a command standalone.

Here’s an embarrassing English translation from someone who hasn’t coded in 11 years:
If [left arrow is pressed] then [navigate to] [PageXX].

Does that make sense? Any help would be greatly appreciated.

Cheers,
Nic

2

Hi, Nic.

Would code like the following effect the desired result for you:

document.onkeydown = function (event) {
  switch (event.key) {
/*
    case 'ArrowUp':
      // Up arrow
      window.location = "desired Url";
      break;
    case 'ArrowDown':
      // Down arrow
      window.location = "desired Url"; 
      break;
*/
    case 'ArrowLeft':
      // Left arrow
      window.location = "desired Url"; 
      break;
/*
    case 'ArrowRight':
      window.location = "desired Url"; 
      // Right arrow
*/
  }
};

?
You need to replace the text “desired Url” with “[PageXX]”. (In addition to the Left arrow, I also gave you code for other arrow keys.)

3

Hi,
It looks like the right direction but it need some wix code adjustments.

Good luck!
Roi.

4

Thanks, Roi.

Wix-ified, then, it would be something like:

import wixLocation from 'wix-location';

// ...

$w("myElement").onKeyPress( (event) => {
  let key = event.key;  // "a"

  switch (key) {
/*
    case 'ArrowUp':
      // Up arrow
      wixLocation.to("desired Url");
      break;

    case 'ArrowDown':
      // Down arrow
      wixLocation.to("desired Url"); 
      break;
*/
    case 'ArrowLeft':
      // Left arrow
      wixLocation.to("desired Url"); 
      break;
/*
    case 'ArrowRight':
      wixLocation.to("desired Url"); 
      // Right arrow
*/
} );
5

This is an old thread and will be closed. If you still have related questions and/or concerns please open up a new thread - You can refer to this thread from yours.