Hi all, basically what I want to achieve is for the site visitor to be able to navigate the website using arrow keys:
- up/down keys: scrolling up and down the site (for reading)
- left/right keys: click a button
All I can find on the forum are posts from 2018 about the workaround with focusing on the input text field. Here’s my version of it:
const focusField = $w(‘#txtInputField’);
focusField.focus();
$w(‘#txtInputField’).onKeyPress((event) => {
if (event.key === “ArrowRight”) { nextPageButtonClick(); }
if (event.key === “ArrowLeft”) { previousPageButtonClick(); }
});
focusField.onBlur(() => {
setTimeout(() => { focusField.focus(); }, 100); });
});
I can scroll up and down the site by default without any wix code, I assume thanks to the browser. However, the moment I implement the focus-on-the-txt-field workaround for the buttons, while the buttons come to life the up/down arrow keys stop working, I assume due to the forced focus on the field.
The only solution I could think of is to blur() upon pressing the up/down arrow keys, but that poses new obstacles in the form of the field re-focusing and taking me to part of the site i scrolled away from…
Is there an expression that I could add to the event handler that would enable the up and down scrolling while preserving the button functionality? Or please someone tell me they simply added keyboard event handlers that are not dependent on focusing on a txt field? Thanks!