Ilias Bennani Ilias Bennani - 3 months ago 11
AngularJS Question

Assign a single keyboard shortcut to a radio button on a web form

I have a simple web form that contains four radio buttons labeled Blue, Green, Orange and Yellow.

JsFiddler example and see code below.

Now I'd like to assign each a keyboard shortcut to each of these radio buttons so, for instance, If I tab to that group of radio buttons, I could press B for blue, G for green etc and that particular radio button would be selected.

In my example, I have used Accesskeys, but i'd like to do this just using ONE and only one keypress. ALT+x = 2 keys. This because using only one keypress is much faster.

I know that when I have tabbed to that group of radio buttons, I can use the arrow keys to change the selected radio button, but for reasons outside of this scope, that is not the optimal solution at this point.

Question:

Is there some way this can be accomplished using HTML5, Angular, javascript or perhaps AngularJS? Any suggestion would be welcome:

Code:

<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

How's this - I have added a class to the group of radio buttons then I bind an event to the keyup that checks the key that is pressed and then selects the correct radio if the code matches

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