単一のキーボードショートカットをWebフォームのラジオボタンに割り当てる

Question

私は、青、緑、橙、黄の4つのラジオボタンを含む単純なWebフォームを持っています。

JsFiddler exampleと下記のコードを参照してください。

これらのラジオボタンのそれぞれにキーボードショートカットを割り当てる必要があります。たとえば、そのラジオボタンのグループにタブを付けると、青色のBキー、緑色のGキー、およびその特定のラジオボタンが選択されます。

私の例では、私はAccesskeysを使用していますが、これはちょうどONEと1つだけのキー入力を使用しています。 ALT + x = 2のキー。これは、1回のキー押しだけを使用する方がはるかに高速です。

ラジオボタンのグループにタブを付けると、矢印キーを使用して選択したラジオボタンを変更できますが、この範囲外の理由で、これは最適な解決策ではありません。

質問：

が、これはHTML5、角度、おそらくjavascriptやAngularJSを用いて達成することができるいくつかの方法がありますか？任意の提案は歓迎されるでしょう：

コード：

<fieldset> 
    <legend>Välj färgmarkering</legend> 
    <form action="../action/return.html" method="get"> 

    <span class="box blue"> 
     <input id="button1" accesskey="1" type="radio" value="1" name="radio-input" title="Alt+1"> 
     <label for="button1">Blue</label> 
    </span> 

    <span class="box green"> 
     <input id="button2" accesskey="2" type="radio" value="2" name="radio-input" title="Alt+2"> 
     <label for="button2">Green</label> 
    </span> 

    <span class="box orange"> 
     <input id="button2" accesskey="2" type="radio" value="2" name="radio-input" title="Alt+2"> 
     <label for="button2">Orange</label> 
    </span> 

    <span class="box yellow"> 
     <input id="button2" accesskey="2" type="radio" value="2" name="radio-input" title="Alt+2"> 
     <label for="button2">Yellow</label> 
    </span> 

    </form> 
</fieldset> 

Answer 1

がどのようにこのだ - 私はその後、私はそれから押されているキーをチェックするからkeyupにイベントをバインドするラジオボタンのグループにクラスを追加しましたコードは

$('.with-access').keyup(function(e) { 
 
    var code = (e.keyCode ? e.keyCode : e.which); 
 

 
    switch (code) { 
 
    case 66: // b 
 
     $('#button1').prop('checked', true); 
 
     break; 
 
    case 71: // g 
 
     $('#button2').prop('checked', true); 
 
     break; 
 
    case 79: // o 
 
     $('#button3').prop('checked', true); 
 
     break; 
 
    case 89: // y 
 
     $('#button4').prop('checked', true); 
 
     break; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="box blue"> 
 
     <input id="button1" accesskey="1" type="radio" value="1" class="with-access" name="radio-input" title="Alt+1"> 
 
     <label for="button1">Blue</label> 
 
    </span> 
 

 
<span class="box green"> 
 
     <input id="button2" accesskey="2" type="radio" value="2" class="with-access" name="radio-input" title="Alt+2"> 
 
     <label for="button2">Green</label> 
 
    </span> 
 

 
<span class="box orange"> 
 
     <input id="button3" accesskey="2" type="radio" value="2" class="with-access" name="radio-input" title="Alt+2"> 
 
     <label for="button3">Orange</label> 
 
    </span> 
 

 
<span class="box yellow"> 
 
     <input id="button4" accesskey="2" type="radio" value="2" class="with-access" name="radio-input" title="Alt+2"> 
 
     <label for="button4">Yellow</label> 
 
    </span>