如何使父元素下的子元素可聚焦，但不包括孙元素？

Question

我希望使父级 div 的所有子元素可以成为焦点，但不包括孙子级别。

像这样：

<div class="parent" >
<div class="child1" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
</div>
<div class="child2" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
</div>
<div class="child3" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
</div>
<div class="child4" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
</div>
<div class="child5" > <!-- should be focused-->
<div class="grandchild" ></div> <!-- shouldn't be focused-->
<!-- more divs-->
</div>
</div>

纯粹使用HTML、CSS可以实现吗？

在父级div上使用tabindex=0是否可使所有子元素都可获取焦点？还是需要为每个子元素单独添加tabindex属性？

使用键盘上的Tab按钮

- User not found

---

什么是“聚焦”？像可以通过制表符进行切换吗？ - Kwright02

请使用键盘按钮“是”进行确认。 - User not found

如果您想添加一些CSS样式，可以使用parent > .child（假设所有子元素都有一个child类）。 - Siddharth Shyniben

Answer 1

将tab-index设置为-1可以防止通过按Tab键来聚焦元素。这可以使用JS自动完成：

document.querySelectorAll('.parent > * > *').forEach((e)=>{
  e.setAttribute("tabindex", -1);
})

<div class="parent">
  <div class="child1">
    <!-- should be focused-->
    <div class="grandchild"></div>
    <!-- shouldn't be focused-->
  </div>
  <div class="child2">
    <!-- should be focused-->
    <div class="grandchild"></div>
    <!-- shouldn't be focused-->
  </div>
  <div class="child3">
    <!-- should be focused-->
    <div class="grandchild"></div>
    <!-- shouldn't be focused-->
  </div>
  <div class="child4">
    <!-- should be focused-->
    <div class="grandchild"></div>
    <!-- shouldn't be focused-->
  </div>
  <div class="child5">
    <!-- should be focused-->
    <div class="grandchild"></div>
    <!-- shouldn't be focused-->
    <!-- more divs-->
  </div>
</div>

- Spectric

---

我该如何使所有子div可聚焦，例如我是否需要在父元素中添加“tabindex = 0”？ - User not found

这种情况下是行不通的，例如您的孙子 div 具有像按钮一样的可聚焦元素。 - anand shukla

@Dumdum，你可以设置tabindex=0，tabindex=1等等。 - Siddharth Shyniben

你可以使用一点儿 JavaScript！ let grandchild = document.getElementsByClassName('grandchild');for (let i = 0; i <= grandchild.length; i++){ grandchild[i].setAttribute('tabindex', '-1'); } - Camille

@Dumdum，我已经更新了我的答案。你可以使用JavaScript自动化这个过程。 - Spectric

Answer 2

参考MDN文档,

• 只有交互式组件必须具有tabindex。
• 避免使用大于0的tabindex值。

元素上的正数tabindex使其可聚焦，但此聚焦性不会被其每个子元素继承。

在纯html中，我认为没有办法使元素的每个子元素都可聚焦，除非您在它们上添加tabindex="0"。最简单的方法是使用javascript，例如执行以下操作：

/// make elements focusable
Array.from(
  document.querySelectorAll(".focusable")
).forEach(item => item.tabIndex = 0);

/// make elements not focusable
Array.from(
  document.querySelectorAll(".grandchild")
).forEach(item => item.tabIndex = -1);

- Taur