使用 jquery 添加键盘导航答案

【问题标题】：adding keyboard navigation with jquery使用 jquery 添加键盘导航
【发布时间】：2014-04-02 21:15:41
【问题描述】：

我构建了一个复杂的 jquery-html 游戏，并且多次使用了点击事件。为了使其可访问，我需要进行键盘导航...是否有任何 jquery 插件或任何方法可以使所有单击事件也与 enter 键一起使用？例如：

<!DOCTYPE html>
<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
  $(document).ready(function(){
    $("p").click(function(){
      $(this).hide();
    });
  });
  </script>
  <style>p:focus {
  outline: 1px solid grey;
  }</style>
 </head>
 <body>
  <p tabindex="1">Par1</p>
  <p tabindex="2">Par2</p>
 </body>
</html>

如果我在段落聚焦时按 enter，那么什么也不会发生...我想创建键盘事件并检测 enter 键，但这会很乏味...有什么解决方案吗？

【问题讨论】：

标签： javascript jquery click keyboard-events

【解决方案1】：

您需要像这样使用http://api.jquery.com/keydown/ 捕捉关键事件

$( "#target" ).keydown(function( event ) {
  switch(event.which) 
  {
    case 37 : //Arrow left
              break;
    case 39 : //Arrow left
              break;
    case 38 : //Arrow up
              break;
    case 40 : //Arrow down
              break;
  }
});

【讨论】：

没有任何插件可以做到这一点吗？谢谢你的回答:)
这么简单的插件你还想烦什么呢？

【解决方案2】：

来自Document Object Model (DOM) Level 3 Events Specification

除了与指针设备相关联之外，点击事件类型必须作为元素激活的一部分进行调度

这意味着click 事件将被触发，例如，如果链接被激活。因此，您可以将 <p tabindex="1">…</p> 替换为 <a href="#" tabindex="1">…</a> 并阻止默认操作。当然，这不一定比其他任何建议都简单。

【讨论】：

【解决方案3】：

您可以通过添加类来使用虚拟焦点。可以应用于任何事件（鼠标或键盘）。

一点启发如何工作

$( "#target" ).keydown(function( event ) {
  switch(event.which) 
  {
    case 37 : //Arrow left
              break;
    case 39 : //Arrow left
              break;
    case 38 : //Arrow up
              break;
    case 40 : //Arrow down
              break;
    case 13 : //Enter
              break;
    // next keys....

  }
});

http://jsfiddle.net/jirkaz/HA4m3/

使用键盘（箭头）移动活动类并使用 Enter 键在活动 div 中获取文本。

【讨论】：