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

Question

我有一个简单的Web表单，其中包含四个标签为Blue、Green、Orange和Yellow的单选按钮。

请查看JsFiddler示例并查看下面的代码。

现在我想为每个单选按钮分配一个键盘快捷方式，因此，例如，如果我切换到该组单选按钮，则可以按B选择蓝色，按G选择绿色等，选择特定的单选按钮。

在我的示例中，我使用了Accesskeys，但我希望只使用一个按键来完成。ALT+x = 2 keys。这是因为使用一个按键要快得多。

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

问题：

是否有办法使用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>

- Ilias Bennani

---

类似这样的内容？ - Jaromanda X

请参考“JS addEventListener keypress”。有许多教程可供参考。 - Jonas Wilms

谢谢，我会立即查看！ - Ilias Bennani

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>

- Pete