将单个键盘快捷方式分配给Web表单上的单选按钮

Question

我有一个简单的网页表单，其中包含四个标有蓝色，绿色，橙色和黄色的单选按钮。

JsFiddler示例 ，请参阅下面的代码。

现在我想给每个单选按钮分配一个键盘快捷键，例如，如果我选中那组单选按钮，我可以按B表示蓝色，G表示绿色等，那个特定的单选按钮会是选择。

在我的例子中，我使用了Accesskeys，但我想这样做只使用一个而且只有一个按键。 ALT + x = 2个键。 这是因为只使用一个按键要快得多。

我知道当我选中这组单选按钮时，我可以使用箭头键来更改所选的单选按钮，但由于此范围之外的原因，这不是此时的最佳解决方案。

题：

有没有办法可以使用HTML5，Angular，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

怎么回事 - 我已经在一组单选按钮中添加了一个类，然后我将一个事件绑定到检查按下的键的键盘，然后如果代码匹配则选择正确的无线电

 $('.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>