iframe 内元素的 Tabindex

Posted 2023-05-09

【中文标题】iframe 内元素的 Tabindex

【英文标题】：Tabindex for elements inside iframe

【发布时间】：2012-03-06 18:14:27

【问题描述】：

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

当使用tab键时，它聚焦于整个iframe而不是聚焦于输入框，下一次按下tab聚焦于为文件类型的输入元素出现的浏览按钮。

我的要求是当我按tab时，焦点在输入文本框，然后是浏览按钮，最后是图像元素。

我尝试将tabindex 设置为 0，但没有成功。

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

【参考方案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