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

Question

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

JsFiddler example 并查看下面的代码。

现在我想为每个单选按钮分配一个键盘快捷键，例如，如果我选择该组单选按钮，我可以按 B 代表蓝色，G 代表绿色等以及特定的单选按钮按钮将被选中。

在我的示例中，我使用了 Accesskeys，但我想只使用 ONE 和一个按键来执行此操作。 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

这是怎么回事 - 我在单选按钮组中添加了一个类，然后我将一个事件绑定到 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>