Question

我有一个充满单选按钮的页面，我希望能够通过选项卡然后根据键盘输入选择选项。我希望让键盘输入能够以与下拉列表相似的方式工作在radiobuttons上（键入字母'G'将自动选择以'G'开头的第一个选项）

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

由于

Answer 1

使用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>

*有关详细说明，请参阅：http://www.webaim.org/techniques/keyboard/accesskey.php

Answer 2

以下是您可能使用的一些代码示例。根据需要添加您自己的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));
    });

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

2 个答案: