基於鍵盤輸入選擇單選按鈕選項

Question

我有一頁充滿了單選按鈕，我希望能夠通過選項卡，然後根據鍵盤輸入選擇選項。我希望能夠以類似的方式使用鍵盤輸入來處理單選按鈕，其方式類似於它在下拉菜單中的工作方式（輸入字母'G'將自動選擇以'G'開頭的第一個選項）

Is there一個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)); 
    }); 

Answer 2

使用HTML而不是jQuery的，瀏覽器有一個內置的機制來選擇鍵盤輸入+使用「快捷鍵」屬性的組合鍵的形式選擇。我很確定如果需要，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