Keyboard shortcut for hyperlink (jQuery)

Question

I have six links on my webpage (and nothing else) and I would like to number each, 1 to 6. It would be nice to have the client hit corresponding number key without the ctrl and alt, etc.

Is this possible and what would be the best approach with jquery or other html scripts?

Answer 1

Here is one version, for jQuery:

$(document).ready(function() {
   $("body").keypress(function(event) {
    var link = "#link";
      if(event.keyCode == 49) link += 1;
      if(event.keyCode == 50) link += 2;
      if(event.keyCode == 51) link += 3;
      if(event.keyCode == 52) link += 4;
      if(event.keyCode == 53) link += 5;
      if(event.keyCode == 54) link += 6;

      if(link != "#link") $(link).trigger("click");
   });
});

Answer 2

Without control + key: keypress event listener in query, and listen for a particular key code per button.

With control + key: You could use an access key (http://www.cs.tut.fi/~jkorpela/forms/accesskey.html)

Answer 3

If you want to do this without the alt or ctrl key you'll need JavaScript. You could attach an event lister to the html or body tag and listen for the keypress event. Don't use complex 'if' statements, that is not necessary. It can be elegant like this (using jQuery):

<a href="http://domain1.com" code="1">link1</a>
<a href="http://domain2.com" code="2">link2</a>
etc

$('body').keypress(function(e) {
  $('[code=' + String.fromCharCode(e.keyCode-48) + ']').click();
});

With the ctrl/alt key you could use the accesskey html attribute: http://reference.sitepoint.com/html/a/accesskey

Answer 4

$('body').bind('keypress', function(e) {
    if(e.keyCode==49){ // number 1 on the keyboard been pressed
        $('firstHref').click();
    } else if(e.keyCode==50) { // number 2
        $('secondHref').click();
    } else if(e.keyCode==51) { // number 3
        $('thirdHref').click();
    }else if(e.keyCode==52) { // number 4
        $('fourthHref').click();
    }else if(e.keyCode==53) { // number 5
        $('fiveHref').click();
    }else if(e.keyCode==54) { // number 6
        $('sixHref').click();
    }
});

Answer 5

You can try something like this: Link (click the run button then click inside of the 'Result' box before you hit the numb keys.

$('body').bind('keypress', function(e) {
    if(e.keyCode==49){ // 1
                alert('1 key pressed');
     window.location = "http://www.stackoverflow.com/"                
    }
    if(e.keyCode==50){ // 2
                alert('2 key pressed');
       window.location = "http://jsfiddle.net/"               
    }
    if(e.keyCode==51){ // 3
                alert('3 key pressed');
       window.location = "http://www.google.com/"                 
    }
    if(e.keyCode==52){ // 4
                alert('4 key pressed');
      window.location = "http://www.stackoverflow.com/"                  
    }
    if(e.keyCode==53){ // 5
                alert('5 key pressed');
      window.location = "http://jsfiddle.net/"                  
    }
    if(e.keyCode==54){ // 6
                alert('6 key pressed');
       window.location = "http://www.google.com/"                 
    }
});​