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

入力をタブで移動する場合は、ラジオをタブで移動するだけで、Enterキーを押して選択するとフォームが送信されるため、何もできません。 。

とにかく、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 に答える