超链接的键盘快捷键 (jQuery)答案

【问题标题】：Keyboard shortcut for hyperlink (jQuery)超链接的键盘快捷键 (jQuery)
【发布时间】：2012-04-16 20:58:17
【问题描述】：

我的网页上有六个链接（没有别的），我想给每个链接编号，从 1 到 6。让客户端在没有 ctrl 和 alt 等的情况下点击相应的数字键会很好。

这可能吗？使用 jquery 或其他 html 脚本的最佳方法是什么？

【问题讨论】：

除非您的视线是技术含量高的观众，否则我看不到很多人使用它。我试图让我的妻子使用 gmail 键盘快捷键无济于事

标签： javascript jquery hyperlink keystrokes

【解决方案1】：

这是一个版本，用于 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");
   });
});

【讨论】：

【解决方案2】：

无控制+键：在查询中监听按键事件，并监听每个按钮的特定键码。

使用 control + 键：您可以使用访问键 (http://www.cs.tut.fi/~jkorpela/forms/accesskey.html)

【讨论】：

【解决方案3】：

如果您想在没有 alt 或 ctrl 键的情况下执行此操作，则需要 JavaScript。您可以将事件列表器附加到 html 或 body 标记并监听 keypress 事件。不要使用复杂的“if”语句，这是没有必要的。它可以像这样优雅（使用 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();
});

使用 ctrl/alt 键，您可以使用 accesskey html 属性：http://reference.sitepoint.com/html/a/accesskey

【讨论】：

只适用于额外的键，即 alt-1，这是他试图避免的。
我真的很喜欢这个，因为它的声明性。它可以以非常灵活的方式进一步修改，例如我想要可见的助记符，所以我使用标签（在我的页面上没有用）来突出显示单个字符热键，设置它的样式，然后想要转到一个链接围绕这样一个元素：`var hotkey = $('kbd:contains(' + String.fromCharCode(e.keyCode) + '), kbd:contains(' + String.fromCharCode(e.keyCode - 32) + ') '); if (hotkey.length) { hotkey.closest('a')[0].click(); }
实际上，我需要将keyCode更改为charCode，因为Firefox上的keyCode似乎为0。它似乎也不适用于IE8（没有9），但这没关系就我而言。
我无法编辑 cmets，所以：原来我之前的解决方案也接受 ctrl+R 作为 "R" + jquery 将 keycode 标准化为 e.which 属性，所以更好的解决方案是：@ 987654323@

【解决方案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();
    }
});

【讨论】：

【解决方案5】：

您可以尝试以下操作：Link（单击运行按钮，然后单击“结果”框内部，然后再按 numb 键。

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

【讨论】：