Html tabindex-1不适用于子元素

我有一个div标签，里面加载了一些内容。里面的内容可以有可聚焦的按钮、锚元素等。我无法控制内容，但可以修改“div”标记属性

我的问题是，即使我将tabIndex-1指定给div标记，焦点仍然会转到内容（锚定、按钮等）

...
点击我

设置

tabindex=“-1”

允许您使用脚本设置元素的焦点，但不会将其置于页面的选项卡顺序中。它也不会将某个对象的子对象从键盘选项卡顺序中拉出

tabindex=“-1”

在您需要将焦点移动到通过脚本或用户操作之外更新的内容时非常方便

如果您试图从tabindex中完全删除某个元素，无论是对于屏幕阅读器还是键盘用户，您都可能需要在以下选项中进行选择：

完全隐藏它（通过

显示：无

）

在元素上使用脚本，以便当它接收到焦点时，脚本将焦点转移到其他位置

---

如果没有上下文（一个有效的URL，一个你想要这样做的原因），这听起来很像可访问性的反面。除非你有很好的理由，否则我建议你不要干扰focus。

最近的方法是使用

iframe

元素，使用javascript将HTML注入其中

<a href="somewhere.html">first link</a>
<iframe id="iframeid" tabindex="-1"></iframe>
<a href="somewhere_else.html">second link</a>

<script>
    document.getElementById('iframeid').contentWindow.document.body.innerHTML="<button>click me</button>";
</script>

document.getElementById（'iframeid'）.contentWindow.document.body.innerHTML=“单击我”；

---

但是，这将导致可访问性问题，例如宣布无法通过键盘访问的链接或按钮。

可以将元素及其子元素同时保持可见和不可聚焦

它通过HTML属性

惰性

：：完成

它尚未得到广泛支持，但有一个polyfill:

npm安装--保存wicg惰性文件

require('wicg-inert')

<section inert>
  I am visible, but not focusable! 
</section>

require（'wicg-indirect'））
我是可见的，但不可聚焦！

不确定为什么没有人提到可见性：隐藏。设置

display:none

在处理非可视元素的维度时，在某些情况下可能会弄乱逻辑

visibility

将保持维度，就像

opacity:0

一样，但也会禁用任何可选项卡的子项

例如：

<div style="visibility: hidden;">
    <a href="#">I'm only tabbable if my parent is visible!</a>
</div>

---

为子元素创建tabindex-1，假设您有一个包装器div， //当我们不希望网格过滤器在其崩溃时可以访问时，请回答如何反应 //这个答案是针对一种特殊情况的——在这种情况下，我们没有ref，而tabIndex道具对大型嵌套元素很重要 //渲染方法

//如果输入和按钮来自某些类型的库（例如材质UI），这些库不以tabIndex作为道具，也不提供参考

   render() {
    return (
    <div id="wrapper" tabIndex={isCollapsed ? -1 : 0 } >
      <div>
        <Input />
      </div>
      <div>
        <Button />
      </div>
    </div>
  )
}
componentDidMount() {
  this.changeTabIndex()
}

componentDidUpdate(prevProps, prevState){
  if(prevState.isCollapsed !== this.state.isCollapsed) {
     this.changeTabIndex();
  }
}

changeTabIndex() {
   const wrapper = document.getElementById("wrapper");
     const buttons = wrapper.getElementsByTagName("button");
     const inputs = wrapper.getElementsByTagName("input");
     const arr = Array.from(buttons).concat(Array.from(inputs));
     arr.foreach((elem) => { elem.setAttribute("tabIndex", this.state.isCollapsed ? -1 : 0 )});
}

render（）{
返回(
)
}
componentDidMount（）{
this.changeTabIndex（）
}
componentDidUpdate（prevProps、prevState）{
if（prevState.isCollapsed！==this.state.isCollapsed）{
这个.changeTabIndex（）；
}
}
changeTabIndex（）{
const wrapper=document.getElementById（“wrapper”）；
const buttons=wrapper.getElementsByTagName（“按钮”）；
常量输入=wrapper.getElementsByTagName（“输入”）；
const arr=Array.from（按钮）。concat（Array.from（输入））；
arr.foreach（（elem）=>{elem.setAttribute（“tabIndex”，this.state.isCollapsed？:0）}）；
}

您可以使用tabindex=“-1”。。。。但请注意，这是HTML5的一项功能，可能不适用于旧浏览器。也许可以使用jquery将tabindex=“-1”设置为div中所有可能的元素……为什么要阻止焦点转到内容？如果内容实际上是交互式的（即，如果您可以用鼠标单击按钮/链接），通常也应该让它们以键盘为焦点。此处“externalContent”中的内容在页面加载时部分可见，因此对于11年，我需要从选项卡顺序中跳过它。我不想为每个孩子添加tabindex=-1，因为我需要在内容完全可见后将其反转。一个常见的用例：在网页上显示对话框。“设置tabindex=“-1”…不会从键盘选项卡顺序中提取内容。”在哪个浏览器上？将tabindex设置为-1对我来说总是可以跳过选项卡顺序中的对象。对不起，这意味着它不会将项目的子项从选项卡顺序中拉出。相应地编辑了答案。在OP的问题中，它不会将嵌套的

从选项卡顺序中拉出，只会将容器（由于它是

，因此它不会在本机上获得焦点）拉出。是的，使用“脚本”也是我能找到的唯一选项。无法显示none，因为我的“externalContent”div中的内容在页面加载时部分可见。不过，我希望找到一种在没有外部事件侦听器的情况下执行此操作的方法！这对我来说是不可行的，因为考虑到可访问性问题。@AdarshKonchady那么你的问题就没有答案了。如果你特别提出一些会导致可访问性问题的问题，你就无法访问。@AdarshKonchady你还应该谨慎阅读Aardrian警告：“这听起来很像可访问性的反面。”这是最好的解决方案。在父项上设置tabindex=“-1”不会从子项中删除tabindex，但在父项上设置visibility:hidden将从子项中删除tabindex。谢谢！这个伟大的解决方案为我节省了很多工作。在我看来，这应该是公认的答案。有了可见性，孩子可以在自己身上设置

可见性：visible

，这样即使在

可见性：hidden

祖先：fwiw内，也可以接收键盘焦点。我想你可能会这样做：

@theddembinski，我始终使用react语法。

->