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

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

  •  4
  • Synetech  · 技术社区  · 14 年前

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

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

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

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

    谢谢。

    2 回复  |  直到 10 年前
        1
  •  6
  •   xmarcos    14 年前

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

    不管怎样,我想你要找的是 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    14 年前

    要禁用对元素的制表符,可以将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;