Tabindex для элементов внутри iframe

Question

У меня есть iframe внутри, который является формой с элементом ввода типа file и элементом image.

Когда используется клавиша табуляции, она фокусируется на iframe в целом и не фокусируется на поле ввода, следующее нажатие клавиши табуляции фокусируется на кнопке Browse, которая появляется для элемента ввода типа file.

Мое требование заключается в том, чтобы при нажатии клавиши Tab фокусировался на текстовое поле ввода, затем на кнопку обзора и, наконец, на элемент изображения.

Я попытался установить tabindex в 0, но это не сработало.

Подскажите, пожалуйста, как управлять порядком табуляции через элементы.

Answer 1

Ваша форма в iframe отделена от главной страницы, поэтому вам нужно поместить объекты в iframe на главную страницу, чтобы tabindex работал так, как вам требуется.

Один из способов сделать это - использовать Ajax для загрузки вашей формы вместо использования iframe. Таким образом, вы сможете динамически загружать и устанавливать tabindex по мере необходимости.

После того, как вы решили проблему с двумя страницами, то есть 'main' и 'iframe', вам просто нужно установить tabindex для каждого элемента по очереди, увеличивая значение, чтобы показать желаемый порядок табуляции. Единственное другое предостережение - вы не можете установить tabindex для изображения. Один из обходных путей - обернуть изображение в элемент, который принимает tabindex, например, элемент a ...

Должно работать что-то вроде следующего: ввод, кнопка, ссылка (изображение)

<input tabindex="1" name="" value="" id="" type="text" />

<button tabindex="2" name="" value="browse" id="browse" />

<a href="" tabindex="3"><img src="" /></a>

См. Эту страницу для получения дополнительной информации об атрибуте tabIndex (с примерами)

http://www.w3schools.com/jsref/prop_html_tabindex.asp

А это руководство по доступности с атрибутом

http://webdesign.about.com/od/usability/a/aa071105.htm