У меня есть форма, содержащая поле выбора, которое отображается только тогда, когда значение предыдущего поля выбора установлено на определенное значение. Вот упрощенная версия, в которой появляется скрытое поле выбора «штаты», если в качестве страны выбрано «США»:
HTML:
<style>
label {
display:inline-block;
min-width:100px;
padding:3px;
}
.hidden{
display:none;
}
</style>
<div>
<label for="country">Country</label>
<select id="country">
<option>Czech Republic</option>
<option>USA</option>
</select>
</div>
<div id="stateContainer" class="hidden">
<label for="state">State</label>
<select id="state">
<option>Alabama</option>
<option>Arizona</option>
<option>Arkansas</option>
</select>
</div>
<div>
<label for="name">Name</label>
<input type="text" id="name" />
</div>
JS:
$(function(){
$("#country").on("change",function(){
if ( $(this).val() === "USA") {
$("#stateContainer").removeClass("hidden");
} else {
$("#stateContainer").addClass("hidden");
}
})
})
... и вот он в JSFiddle:
http://jsfiddle.net/xoundboy/a2HdZ/5/
он отлично работает при использовании мыши, но если пользователь ограничен только вводом с клавиатуры, тогда UX нарушается. Вы можете увидеть это, если фокус находится в поле страны, и вы используете стрелки вверх / вниз, чтобы выбрать «США» в качестве страны, а затем клавишу табуляции, чтобы перейти к следующему полю. Вместо перехода к недавно показанному полю «состояние» он переходит к полю «имя».
Вероятно, я мог бы исправить это, перехватив нажатие клавиши табуляции в JS, переведя фокус на только что показанное поле и предотвратив поведение по умолчанию, но это похоже на уродливый хак. Какова наилучшая практика для обработки того, что должно быть довольно распространенным сценарием?
