Я пытаюсь сделать большую форму более дружелюбной. Существует ряд полей, которые используются в особых случаях, и они скрыты внутри контейнера аккордеона со ссылками для их экспонирования, если это необходимо.
Однако (по крайней мере, в Chrome), если вы вставляете поля, вы в конечном итоге сосредоточитесь на полях, которые скрыты от просмотра, но доступны для ввода с клавиатуры.
Каким будет метод Good ™ для этого? Использовать jQuery для установки tabindex на основе отображения!= None, а затем повторно установить, когда происходят аккордеонные события? Может быть, когда поле, скрытое CSS, получает фокус, открывается открытый аккордеон?
Вот jsfiddle, демонстрирующий проблему, используя html ниже. Вкладка переходит от видимой к аккордеонной ссылке со скрытым вводом текста и до последней видимой: http://jsfiddle.net/2EfXM/
<p class="file_info">
<label>Visible
<input type="text" name="vis1" id="vis1" class="date" value="" />
</label>
</p>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle accordion-arrow" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Show more fields
</a>
</div>
<div id="collapseOne" class="accordion-body collapse out">
<h5>Source/Use Metadata</h5>
<p class="file_info">
<label>Hidden:
<input type="text" name="default_original_source" id="default_original_source" class="" value="" />
</label>
</p>
</div>
</div>
</div>
<p class="file_info">
<label>Visible
<input type="text" name="vis2" id="vis2" class="date" value="" />
</label>
</p>
Интересная заметка: используя display:none
, затем сломал jQuery validate в IE 9. Он выбросил ошибки в скрытые поля:
SCRIPT5007: Unable to get value of the property 'call': object is null or undefined
jquery.validate.js, line 1174 character 5
После некоторых исследований это было окончательное решение:
.collapse input {
visibility: hidden;
}
.collapse.in input {
visibility:visible;
}