How to create a keyboard shortcut for an input button

Question

I am showing a bunch of pictures and each picture has its own HTML page. I have an input button that onclick will take you to the next link for the picture. However, I want to be able to use my keyboard arrows to go forward and back. I am new to coding and don't know if this is possible. Can I do this with HTML using the accesskey:

<input type="button" accesskey="?" value="Next Item"> 

Or do I need to use a JQuery plugin? If so, which one?

Answer 1

As zzzzBov explained, the HTML accesskey defines a key that will be trapped only when it is combined with the ALT key. That is why that is not useful for trapping any key alone.

But you have to take special care choosing the event to trap the cursor keys because Webkit has decided not to trap them with the keypress event as it is not in the standard. At this moment the other 3 answers here use this keypress event and that is why they don't work in Google Chrome nor Safari, but if you change that to keydown they'll work on all browsers.

You can use this jQuery code to capture the keydown event of the left, right, up, and down arrow keys:

$(window).keydown(function(e) {   switch (e.keyCode) {     case 37: // left arrow key     case 38: // up arrow key       e.preventDefault(); // avoid browser scrolling due to pressed key       // TODO: go to previous image       return;     case 39: // right arrow key     case 40: // up arrow key       e.preventDefault();       // TODO: go to next image       return;   } }); 

And in the following code snippet you can see and run a complete example in which images are swapped using the keys or the buttons.

var currentImage = 0;  var imagesArray = [    'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png',    'https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png',    'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png'  ];    function hasPrev() {    return currentImage > 0;  }    function hasNext() {    return currentImage < imagesArray.length - 1;  }    function goToPrev(e) {    e.preventDefault();    if (!hasPrev())      return;    currentImage -= 1;    updateScreen();  }    function goToNext(e) {    e.preventDefault();    if (!hasNext())      return;    currentImage += 1;    updateScreen();  }    function updateScreen() {    $('#imgMain').attr('src', imagesArray[currentImage]);    $('#btnPrev').prop('disabled', !hasPrev());    $('#btnNext').prop('disabled', !hasNext());  }    $(document).ready(function() {    updateScreen();    $('#btnPrev').click(goToPrev);    $('#btnNext').click(goToNext);  });    var keyCodes = {    left: 37,    up: 38,    right: 39,    down: 40  };    $(window).keydown(function(e) {    switch (e.keyCode) {      case keyCodes.left:      case keyCodes.up:        goToPrev(e);        return;      case keyCodes.right:      case keyCodes.down:        goToNext(e);        return;    }  });

button:enabled kbd {    color: green;    font-weight: bold;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="btnPrev">    Previous Image    <br/>    <small>(arrow keys: <kbd>left</kbd> or <kbd>up</kbd>)</small>  </button>  <button id="btnNext">    Next Image    <br/>    <small>(arrow keys: <kbd>right</kbd> or <kbd>down</kbd>)</small>  </button>  <br/>  <img id="imgMain" src="">

UPDATE (May 2016)

keyCode has recently been deprecated (but I haven't found a cross-browser solution yet). Quoting MDN article for keyCode:

Deprecated

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

...

This shouldn't be used by new web applications. IE and Firefox already (partially) support KeyboardEvent.key. Also, Google Chrome and Safari support KeyboardEvent.keyIdentifier which is defined in the old draft of DOM Level 3 Events. If you can use them or one of them, you should use them/it as far as possible.