4

是否有一种简单的方法来启用或禁用 IFrame 以将其从 Tab 顺序中移除？

我创建了一个简单的 HTML 页面，其中包含多个链接，单击这些链接时会显示或隐藏与该链接关联的 IFrame，并将 IFrame 的 SRC 属性设置为我的 Wordpress 博客的 PressThis 表单之一。通过这种方式，我可以轻松地从单个页面向任何博客添加帖子。

除了 Tab 键的行为之外，此页面上的所有内容都按预期正常工作。所有的 IFrame 最初都是隐藏的，并且没有设置 SRC（例如<iframe src=""></iframe>）。问题是，当我按 Tab 时，它不是从一个链接转到另一个链接，而是将焦点设置在链接之间的隐藏（和空）IFrame 上。

当框架显示并加载 PressThis 表单时，按 Tab 可以正确地在链接之间浏览表单的输入字段（以及页面中的所有其他内容）。但是，当框架再次被隐藏时，按 Tab 仍然会遍历每个字段，因此使用键盘从链接到链接是非常糟糕的。

我试图找出一种切换 IFrame 的方法，以便当它隐藏时，按 Tab 跳过它（它从 Tab 顺序中删除），当它显示时，按 Tab 在其表单字段之间导航。

我环顾四周，找不到任何关于直接禁用 HTML 元素的信息（HTML 元素似乎没有 disabled 属性作为 DOM 的一部分，也没有禁用的 CSS 样式）。我能找到的最接近的事情是人们询问禁用特定表单字段。

有没有简单的方法来完成这项工作？

谢谢。

4

2 回答 2

6

最好提供一些示例代码来说明您正在尝试做什么，这样您会获得更多的兴趣（和答案）。

无论如何，我认为您正在寻找的是tabindex属性，您可以使用它来指定元素的标签顺序，甚至从循环中删除元素。

快速示例：http: //jsfiddle.net/zFXNM/

<a tabindex="1" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

<a tabindex="2" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

<a tabindex="3" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

价值观是这样运作的：

  • tabindex > 0= 设置元素 tab 顺序，顺序是 ASC，所以 1 先出现
  • tabindex = 0= 选项卡顺序遵循文档选项卡流程。
  • tabindex =-1= 从文档选项卡流中删除元素（不能被选项卡）
于 2010-09-28T05:00:47.157 回答
2

要禁用对元素的制表符，您可以将 iframe 上的 tabindex 属性设置为 -1。

例如

<iframe src="" tabindex="-1" id="some-iframe"></iframe>

这是一个演示，尝试在输入中切换。

如果您想在设置 src 属性后重新启用选项卡，只需通过 javascript 将其设置回 0，浏览器应该会处理其余的事情。

document.getElementById("some-iframe").tabIndex = 0;
于 2010-09-28T04:40:49.960 回答