Selecting radio button option based on keyboard input

Question

I have a page full of radio buttons that I'd like to be able to tab through and then select options based on keyboard input. I'm hoping to get the keyboard input to work on radiobuttons in a similar way to how it works on dropdowns (typing the letter 'G' will automatically select the first option that starts with a 'G')

Is there a jquery plugin out there that can help me with this or do I have to put together the functionality from scratch. Unfortunately, as per customer request, the options need to stay in radiobutton (not dropdown) format and the built-in tab/arrow keys/spacebar functionality isn't quite enough.

Thanks

Answer 1

Using HTML rather than jQuery, browsers have a built-in mechanism to select form options for keyboard input + a modifier key using the 'accesskey' attribute. I'm pretty sure jQuery could interact with this method if necessary.

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

*See for more explanation: http://www.webaim.org/techniques/keyboard/accesskey.php

Answer 2

Here is some examples of code you might use. Add your own Case parts as needed, put your selectors in to match your structure.

One has passed the current selection, the other has not. Use as you wish and make specific to your need.

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