Bootstrap：使用Tab按钮访问单选按钮

Question

我有一个Bootstrap窗体（请参阅here小提琴及其下面的代码）。

当使用键盘选项卡按钮时，从第一个字段开始，我可以浏览表单字段。但是，我有一个单选按钮条目（管理员/操作员），通过制表键跳过。

如何通过标签页可以访问窗体的单选按钮？

<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> 

Answer 1

你起不到太多，因为如果通过输入是到选项卡，你只需简单地标签槽的收音机，你不能用它做任何事情，因为如果你想按回车键来选择一，表格将被发送。

无论如何，你可以使用HTML tabindex属性：

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

jsFiddle

编辑根据您的评论：

包含以下代码：

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