2

我有一个 iframe,里面是一个带有文件类型输入元素和图像元素的表单。

当使用 tab 键时,它专注于整个 iframe 而不是专注于输入框,下一次按下 tab 键专注于为类型文件的输入元素出现的 Browse 按钮​​。

我的要求是当我按下制表符时,焦点转到输入文本框,然后是浏览按钮,最后是图像元素。

我尝试设置tabindex为 0 但它不起作用。

请建议如何通过元素控制标签顺序。

4

1 回答 1

1

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

于 2012-02-16T05:24:05.447 回答