Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a keyboard shortcut for an input button

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?

like image 615
Ryan Bennett Avatar asked Feb 21 '11 01:02

Ryan Bennett


People also ask

How do I make a hotkey for a button?

Right-click the desktop shortcut and select Properties from the menu. Click the Shortcut tab. Click the Shortcut key box and enter a new keyboard shortcut for the program or web page. Just enter a letter there to set up the new hotkey.

How do I create a keyboard shortcut for a text box in access?

Right-click the control for which you want to set a keyboard shortcut, and then click Control Properties on the shortcut menu. Click the Advanced tab. In the Access key box, type a character. An access key is simply a keyboard shortcut that uses the ALT key as part of the shortcut.

How do I change the input method shortcut?

Press and hold the “alt” key, then press enter key to switch input method.


1 Answers

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.

like image 119
Mariano Desanze Avatar answered Sep 18 '22 15:09

Mariano Desanze