Bootstrap :使用Tab键访问单选按钮

7xzttuei  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(140)

我有一个引导表单。当使用键盘Tab键时,从第一个字段开始,我可以在表单字段中导航。但是,我有一个单选按钮条目(管理员/操作员),按Tab键会跳过它。
如何通过按Tab键来访问表单的单选按钮?

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

biswetbf1#

你不会得到太多,因为如果你通过输入,你只是简单地通过收音机,你不能做任何事情,因为如果你想按回车键选择一个,表格将被发送。
无论如何,您都可以使用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

相关问题