iframe 内元素的 Tabindex
我有一个 iframe，里面有一个表单，其中包含文件类型的输入元素和图像元素。
使用 Tab 键时，它会聚焦于整个 iframe，而不聚焦于输入框，下次按下 Tab 键时，聚焦于针对类型文件的输入元素出现的浏览按钮。
我的要求是，当我按 Tab 时，焦点将转到输入文本框，然后转到浏览按钮，最后转到图像元素。
我尝试将 tabindex 设置为 0，但没有成功。
请建议如何通过元素控制选项卡顺序。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
iframe 中的表单与主页分开，因此您需要将 iframe 中的对象放到主页上，以便 tabindex 能够按您的要求工作。
一种方法是使用 Ajax 加载表单，而不是使用 iframe。这样您就可以根据需要动态加载和设置 tabindex。
一旦解决了拥有两个页面（即“main”和“iframe”）的问题，您只需依次在每个元素上设置
tabindex，递增该值即可显示所需的 Tab 键顺序。唯一需要注意的是，您无法在图像上设置 tabindex。一种解决方法是将图像包装在接受 tabindex 的元素中，例如a元素...类似以下内容应该可以工作，输入，按钮，链接（图像）
请参阅此页面有关 tabIndex 属性的更多信息（带有示例）
http://www.w3schools.com/jsref/prop_html_tabindex.asp
以及此属性的可访问性指南
http://webdesign.about.com/od/usability/a/aa071105.htm
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
tabindexon 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 anaelement...Something like the following should work, input, button, link(image)
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