2013-01-13 4 views
2

У меня есть форма Bootstrap (см. here для скрипки и ниже для кода).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> 
+0

Это предложение было задано ранее, см. Http://stackoverflow.com/questions/10739863/radio-button-keyboard-trap/10740595#10740595. Вы пытаетесь сделать что-то, что вам не нужно –

ответ

2

Вы бы не достичь слишком много, потому что если вы были на вкладку через входы, вы бы просто закладка корыта радио, и вы ничего не можете сделать с этим, потому что если вы хотите, чтобы нажать клавишу ввода для выбора один, форма будет отправлена.

Несмотря на это, вы можете использовать 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

+0

Итак, вы частично решили проблему. Может быть, немного JavaScript, чтобы заменить 'space' на' click', когда выбран переключатель, выполнит задание. – Randomblue

+0

@ Randomblue Замените, что именно? – SeinopSys

+0

Слушайте событие 'keypress', и если код ключа является' space', тогда создайте 'click' на выбранной радиостанции. – Randomblue

Смежные вопросы