代码之家 › 专栏 › 技术社区 › Synetech

启用/禁用HTML元素(IFrame)以防止或允许对其进行制表符切换/聚焦

tabindex keyboard html

4

Synetech · 技术社区 · 15 年前

<iframe src=""></iframe> ). 问题是,当我按Tab键时,它将焦点设置为链接之间的隐藏(和空)iframe,而不是从一个链接转到另一个链接。

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

我正在想办法切换IFrame,这样当它被隐藏时,按Tab键跳过它(它从Tab顺序中被删除),当它被显示时,按Tab键在它的表单字段之间导航。

我环顾四周,找不到任何关于直接禁用HTML元素的内容(HTML元素似乎没有禁用属性作为DOM的一部分,也没有禁用CSS样式)。我能找到的最接近的东西是人们询问关于禁用特定表单字段的问题。

谢谢。

2 回复 | 直到 11 年前

1

6

xmarcos 15 年前

最好提供一些示例代码,说明您正在尝试做什么,这样您会得到更多的兴趣(和答案)。

不管怎样,我想你要找的是 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 =设置元素选项卡顺序,顺序是ASC,因此1优先
tabindex = 0 =选项卡顺序遵循文档选项卡流。
tabindex =-1

2

1

Marko 15 年前

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

例如

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

Here's a demo

如果您想在设置src属性后重新启用tabing,只需通过javascript将其设置回0,浏览器就可以处理其余的事情。

document.getElementById("some-iframe").tabIndex = 0;