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

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

1 个答案: