2

我有一个 Bootstrap 表单（请参阅此处的小提琴和下面的代码）。

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

如何通过制表键访问表单的单选按钮？

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

1 回答 1

3

您不会取得太多成就，因为如果您要通过输入进行选项卡，您只需在收音机中进行选项卡，您无法对其进行任何操作，因为如果您想按回车键选择一个，表格将被发送.

无论如何，您可以使用 HTMLtabindex属性：

<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

于 2013-01-13T18:46:56.773 回答