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

Question

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

是否有一个 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));
    });