基于键盘输入选择单选按钮选项

Question

我有一页充满了单选按钮，我希望能够通过选项卡，然后根据键盘输入选择选项。我希望能够以类似的方式使用键盘输入来处理单选按钮，其方式类似于它在下拉菜单中的工作方式（输入字母'G'将自动选择以'G'开头的第一个选项）

Is there一个jquery插件可以帮助我解决这个问题，或者我必须从零开始组合功能。不幸的是，根据客户的要求，选项需要保持单选按钮（而不是下拉）格式，而内置的选项卡/箭头键/空格键功能还不够。

感谢

Answer 1

这里是您可以使用代码的一些例子。根据需要添加您自己的Case部件，将您的选择器放入以匹配您的结构。

一个已通过当前选择，另一个没有。 根据需要使用，并根据您的需要进行特定设置。

/* handle special key press */ 
    function checkKey(e) 
    { 
     var shouldBubble = true; 
     switch (e.keyCode) 
     { 
      // user pressed the Tab           
      case 9: 
       { 
        $(".pickMyClass").toggleClass("pickSelectVisible"); 
        $("#someOtherClass").toggleClass('pickHighlight'); 
        shouldBubble = false; 
        break; 
       }; 
       // user pressed the Enter  
      case 13: 
       { 
        $(".pickMyClass").toggleClass("pickSelectVisible"); 
        $('.pickEntryArea').trigger('change'); /* we made changes so trigger it */ 
        $("#someOtherClass").toggleClass('pickHighlight'); 
        break; 
       }; 
       // user pressed the ESC 
      case 27: 
       { 
        $(".pickMyClass").toggleClass("pickSelectVisible"); 
        $("#someOtherClass").toggleClass('pickHighlight'); 
        break; 
       }; 
     }; 
     /* this propogates the jQuery event if true */ 
     return shouldBubble; 
    }; 
    /* handle special key press */ 
    function checkFieldKey(e, me) 
    { 
     var shouldBubble = true; 
     switch (e.keyCode) 
     { 

      // user pressed the Enter   
      case 13: 
       { 
        $(me).blur(); 
        $("#someSpecialSelect").focus(); 
        shouldBubble = false; 
        break; 
       }; 
     }; 
     /* this propogates the jQuery event if true */ 
     return shouldBubble; 
    }; 
    /* user pressed special keys while in Select */ 
    $(".someSelect").keydown(function(e) 
    { 
     return checkKey(e); 
    }); 
    /* user pressed special keys while in Select */ 
    $(".somethingOther").keydown(function(e) 
    { 
     return checkFieldKey(e, $(this)); 
    }); 

Answer 2

使用HTML而不是jQuery的，浏览器有一个内置的机制来选择键盘输入+使用“快捷键”属性的组合键的形式选择。我很确定如果需要，jQuery可以与此方法进行交互。

<p>To select with a keyboard, click "alt+a" or "alt+b"*</p> 
<form name="myForm" method="post"> 
    <input type="radio" accesskey="a" value="a" name="myRadio" /> Value A 
    <input type="radio" accesskey="b" value="b" name="myRadio" /> Value B 
    <input type="submit" name="submit" value="submit" /> 
</form> 

*有关详情，请解释：http://www.webaim.org/techniques/keyboard/accesskey.php