Jquery 根据键盘输入选择单选按钮选项

Jquery 根据键盘输入选择单选按钮选项,jquery,jquery-plugins,keyboard,drop-down-menu,radio-button,Jquery,Jquery Plugins,Keyboard,Drop Down Menu,Radio Button,我有一个充满单选按钮的页面,我希望能够通过制表符,然后根据键盘输入选择选项。我希望让键盘输入在单选按钮上的工作方式与在下拉菜单上的工作方式类似(键入字母“G”将自动选择以“G”开头的第一个选项) 是否有一个jquery插件可以帮助我实现这一点,或者我必须从头开始整合功能。不幸的是,根据客户的要求,这些选项需要保持radiobutton(而不是下拉)格式,而内置的选项卡/箭头键/空格键功能还不够 感谢使用HTML而不是jQuery,浏览器有一个内置机制来选择键盘输入的表单选项+使用“accessk

我有一个充满单选按钮的页面,我希望能够通过制表符,然后根据键盘输入选择选项。我希望让键盘输入在单选按钮上的工作方式与在下拉菜单上的工作方式类似(键入字母“G”将自动选择以“G”开头的第一个选项)

是否有一个jquery插件可以帮助我实现这一点,或者我必须从头开始整合功能。不幸的是,根据客户的要求,这些选项需要保持radiobutton(而不是下拉)格式,而内置的选项卡/箭头键/空格键功能还不够


感谢使用HTML而不是jQuery,浏览器有一个内置机制来选择键盘输入的表单选项+使用“accesskey”属性的修改键。我非常确信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>
要使用键盘进行选择,请单击“alt+a”或“alt+b”*

价值A B值

*有关更多说明,请参见:

以下是一些可能使用的代码示例。根据需要添加您自己的案例部分,放入选择器以匹配您的结构

一个已通过当前选择,另一个未通过。 随心所欲地使用,并根据您的需要进行具体设置

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

我可以看到这一点的潜力,但我正在寻找更多的东西,将看到文本和处理访问键自动。我上面没有提到的下拉列表的另一个特性是,两次点击“G”将移动到以“G”开头的第二个响应。我的另一个贴纸是,不同的浏览器使用不同的按键组合。你要假设单选按钮文本的第一个字母吗?如果有重复的怎么办?是的,假设单选按钮文本的第一个字母。正如我所说的,如果可能的话,我希望有一个完全复制下拉菜单样式的东西,但这还不足以从头开始创建它。最低要求是循环遍历以按下字母开头的所有选项。如果可能的话,它将是伟大的支持快速爆发的前几个字母。在这种情况下,它将有助于您发布您的单选按钮HTML剪贴画。恐怕您在复制下拉选择输入时会遇到问题,因为许多键已经映射到浏览器功能,而没有键盘修改器。当选择输入处于焦点时,它工作。我不确定是否有可能以同样的方式专注于一组单选按钮。这个框架看起来很棒,如果我需要从头开始构建一些东西,我可能最终会使用它,但不幸的是,我正在寻找一种可以查看文本并自动检查键的东西,而不是必须定义每个键的行为方式。基本上,我在寻找一些我可以在不改变任何代码的情况下放入多个位置的东西,它可以让单选按钮像下拉菜单一样对键盘输入做出反应。你可以在适当的位置放置一个字符框,然后有一个通用的过程来管理对关键条目的反应-并从中创建一个简单的插件…只是一个想法。这应该没有那么困难。我没有寻找“单选字符”类型的插件。真的,听起来你想像自动完成插件一样处理按键,但让它作用于单选按钮中的文本-因此应该可以从自动完成中提取按键处理,并从中创建新的插件,或者把我给出的作为一个基准点,因为这里似乎没有任何预先构建的东西,所以我接受你的答案。感谢您的帮助,这个框架应该能够真正简化构建一个快速插件的过程,该插件可以检查键盘输入和可用的单选按钮选项。似乎找不到任何预构建的内容,如果我有机会构建一个值得发布的插件,我会在这里发布一个链接。