Выбор опции переключателя на основе ввода с клавиатуры

Question

У меня есть страница с полными переключателями, которые я хотел бы иметь возможность прокручивать, а затем выбирать параметры на основе ввода с клавиатуры. Я надеюсь, что клавиатура будет работать на радиообменах так же, как она будет работать на выпадающих меню (ввод буквы «G» автоматически выбирает первый вариант, который начинается с «G»)

Есть ли плагин jquery, который может помочь мне в этом, или мне нужно собрать функциональность с нуля. К сожалению, согласно запросу клиента, параметры должны оставаться в формате radobutton (без выпадающего списка), а встроенные вкладки/клавиши со стрелками/функциональные возможности пробела недостаточно.

Благодаря

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, браузеры имеют встроенный механизм для выбора вариантов формы для ввода с клавиатуры + клавиши-модификатора с помощью атрибута «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