Go to link when pressing keyboard arrows

Question

I have 2 links: <a href='leftLink.php'><< Prev</a> and <a href='rightLink.php'>Next >></a>.

Can it be possible to go to leftLink when pressing left arrow from keyboard, and to rightLink.php when pressing right arrow from keyboard? Any advice would be very welcome

Thank you in advance.

Answer 1

You can setup a keyboard event listener (keydown or keyup) on the document.

document.addEventListener('keydown',(event)=>{});

Check the key property (modern browsers) or keyCode (deprecated, older browsers) on the event object for the appropriate value corresponding to the left and right arrows.

switch(event.key){
    case 'ArrowLeft':
    break;
    case 'ArrowRight':
    break;
}

Then use the click() method of the respective link to trigger the navigation.

document.getElementById("prevLink").click();

let prevLink = document.getElementById("prevLink");
let nextLink = document.getElementById("nextLink");
document.addEventListener("keydown", ({key}) => {
  switch (key) {
    case 'ArrowLeft':
      console.log('Left arrow');
      prevLink.click();
      break;
    case 'ArrowRight':
      console.log('Right arrow');
      nextLink.click();
      break;
  }
});

<a id="prevLink" href='#prevUrl'><< Prev</a>

<a id="nextLink" href='#nextUrl'>Next >></a>

Answer 2

Use this to detect keypress..

function checkKey(e) {
    var event = window.event ? window.event : e;
    if (true) {
        alert(event.keyCode)
    }
}

from here determine the key pressed and use document.location to redirect the browser.

keycodes are:

left = 37
up = 38
right = 39
down = 40

Answer 3

You can try this:

$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    //your code
    window.location.href = "leftLink.php";
  }
  else if(e.keyCode == 39) { // right
    //your code
    window.location.href = "rightLink.php";
  }
});

Reference