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?

Unless your sight is a highly technical audience I don't see many people using it. I've tried to get my wife to use gmail keyboard shortcuts to no avail — dstarh, Apr 16 '12 at 21:14

score 2 · Accepted Answer · answered Apr 16 '12 at 21:10

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");
   });
});

Koen Peters · Answer 2 · 2012-04-16T21:35:19.603

1

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

edited Apr 16 '12 at 21:35

answered Apr 16 '12 at 21:01

Koen Peters

12,798
6
36
59

that only works with an extra key, i.e. alt-1, which is what he is trying to avoid. – Sam Tyson Apr 16 '12 at 21:04
I really like this one because of its declarativness. It can be further modified in a very flexible way, for instance I wanted visible mnemonics, so I utilized tag (no use on my page) to highlight a single char hotkey, styled it and then wanted to go to a link that is around such an element: `var hotkey = $('kbd:contains(' + String.fromCharCode(e.keyCode) + '), kbd:contains(' + String.fromCharCode(e.keyCode - 32) + ')'); if (hotkey.length) { hotkey.closest('a')[0].click(); } – virgo47 Jul 14 '13 at 17:13
Actually, I needed to change keyCode to charCode, because keyCode on Firefox seems to be 0. It doesn't seem to work on IE8 either (don't have 9), but that does not matter for my case. – virgo47 Jul 14 '13 at 20:42
I can't edit comments, so: It turned out that my previous solution accepts also ctrl+R as "R" + jquery normalizes keycode into e.which property, so the better solution is: `var hotkey = $('kbd:contains(' + String.fromCharCode(e.which) + '), kbd:contains(' + String.fromCharCode(e.which - 32) + ')'); if (!e.ctrlKey && !e.altKey && !e.metaKey && hotkey.length) { hotkey.closest('a')[0].click(); }` – virgo47 Jul 15 '13 at 05:25

Kristian · Answer 3 · 2012-04-16T21:03:50.420

1

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)

edited Apr 16 '12 at 21:03

answered Apr 16 '12 at 21:01

Kristian

21,204
19
101
176

score 0 · Answer 4 · answered Apr 16 '12 at 21:06

$('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();
    }
});

score 0 · Answer 5 · answered Apr 16 '12 at 21:09

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/"                 
    }
});

Keyboard shortcut for hyperlink (jQuery)

5 Answers5