CODEWITHSUNDEEP
javascriptformstwitter-bootstrapaccessibility
Randomblue
Randomblue

Reputation: 116263

Bootstrap: Access radio buttons using tab press

I have a Bootstrap form. When using the keyboard tab button, starting from the first field, I can navigate through the form fields. However, I have a radio buttons entry (Administrator/Operator) that is skipped by tab presses.

How can I have the form's radio buttons accessible via tab presses?

<form class='form-horizontal'>
  <div class='control-group'>
    <label class='control-label'>Username</label>
    <div class='controls'>
      <input type='text' class='username' id='new-user-username' placeholder='Username'
      />
    </div>
  </div>
  <div class='control-group'>
    <label class='control-label'>Rights</label>
    <div class='controls'>
      <div class='btn-group' data-toggle='buttons-radio' id='new-user-rights'> <span class='btn'>Administrator</span>
 <span class='btn' id='new-user-operator'>Operator</span>

      </div>
    </div>
  </div>
  <div class='control-group'>
    <label class='control-label'>Password</label>
    <div class='controls'>
      <input type='password' class='password' id='new-user-password' placeholder='Password'
      />
    </div>
  </div>
  <div class='control-group'>
    <label class='control-label'>Confirm password</label>
    <div class='controls'>
      <input type='password' class='confirm' id='new-user-confirm' placeholder='Confirm password'
      />
    </div>
  </div>
  <div class='controls'>
    <button type='button' class='btn btn-primary' id='new-user-button'>Add new user</button>
  </div>
</form>

Upvotes: 2

Views: 2794

Answers (1)

SeinopSys
SeinopSys

Reputation: 8937

You would not achieve too much, because if you were to tab through the inputs, you would just simply tab trough the radios, and you cannot do anything with it, because if you wanted to press enter to select one, the form would be sent.

Regardless, you could use the HTML tabindex attribute:

<input type='password' tabindex="1">

jsFiddle

Edit based on your comment:

Include the following code:

$('#new-user-rights span').keyup(function(e){
    e = e || window.event;

    if (e.keyCode == 32){
        $('#new-user-rights span').removeClass('active')
        $(this).addClass('active');
    }
})

jsFiddle

Upvotes: 3

Related Questions