CODEWITHSUNDEEP
htmliframetabindex
Anitha
Anitha

Reputation: 29

Tabindex for elements inside iframe

I have an iframe inside which is a form with an input element of type file and an image element.

When using tab key it focuses on the iframe as a whole and does not focus on input box, the next press of tab focuses on the Browse button which appears for the input element of type file.

My requirement is that when I press tab, focus goes on the input text box, then on browse button and finally to image element.

I tried setting tabindex as 0 but it didn't work.

Please suggest how to control the tab order through elements.

Upvotes: 2

Views: 7779

Answers (1)

Fraser
Fraser

Reputation: 17094

Your form in the iframe is separate from the main page so you would need to put the objects in the iframe onto the main page for the tabindex to work like you require.

One way to do this would be to use Ajax to load your form, rather than using an iframe. That way you will be able to dynamically load and set the tabindex as required.

Once you have resolved the issue of having two pages, i.e. 'main' and 'iframe', you just need to set the tabindex on each element in turn, incrementing the value to show the desired tab order. The only other caveat is that you can't set the tabindex on an image. One workaround is to wrap the image in an element that does accept the tabindex, such as an a element...

Something like the following should work, input, button, link(image)

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

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

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

See this page for more information on the tabIndex attribute (with examples)

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

And this guide to accessiblity with the attribute

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

Upvotes: 1

Related Questions