启用/禁用HTML元素(IFrame)以阻止或允许对其进行选项卡/聚焦它

Question

有没有一种简单的方法可以启用或禁用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元素似乎没有禁用属性作为DOM的一部分,也没有禁用的CSS样式).我能找到的最接近的事情是人们询问禁用特定表单字段.

有一个简单的方法来完成这项工作吗？

谢谢.

Answer 1

提供一些你想要做的代码示例总是更好,你会得到更多的兴趣(和答案).

无论如何,我认为你要找的是tabindex属性,你可以用它来指定元素的Tab键顺序,甚至从循环中删除元素.

快速示例: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 =设置元素标签顺序,顺序是ASC,所以1首先出现
• tabindex = 0 = Tab键顺序遵循文档选项卡流程.
• tabindex =-1 =从文档选项卡流中删除元素(不能选项卡)