如何在没有 JavaScript 的情况下分离键盘选项卡旋转组？

Question

我们可以使用键盘上的 Tab 键来循环输入和按钮。

我们也可以使用 Space 键在一个按钮处于焦点时有点点击按钮。

以下面的演示为例，如果你多次按Tab，你会循环输入，当你按下Space时<button>Popup</button>打开聚焦，您将看到一个带有另外两个按钮的弹出窗口。

现在，当您按住 Tab 时，您将在弹出窗口之外看到焦点循环。

popup.addEventListener('click', function(){
  overlay.classList.add('active');
});

overlay.addEventListener('click', function(e){
  if (e.target === overlay)
    overlay.classList.remove('active');
});

input {
  display: block;
}

input:nth-child(3){
  display: inline-block;
}

button {
  margin: 0 0.25em;
}

#overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
  display: none;
}

#overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  width: 300px;
  background-color: #fff;
  padding: 1em;
  display: flex;
  justify-content: flex-end;
}

<input>
<input>
<input><button id="popup">Popup</button>
<input>
<input>

<div id="overlay">
  <div id="container">
    <button>Cancel</button>
    <button>OK</button>
  </div>
</div>

是否有一种内置方法可以在定义的范围内（即父元素）绑定循环组，以便制表符只会循环通过兄弟元素？

编辑

我知道如何使用 JavaScript 来实现，但是对于一个看似简单的功能来说感觉过于复杂。所以我有点在寻找一个非 JS 替代方案（即 HTML 内置属性、CSS 属性）或一个 JS 解决方案（不是 jQuery），它可能与我没有听说过的内置 HTMLElement 属性有关。

Answer 1

是的，这是一个带有简单 Javascript 事件的 HTML 示例。我仍然将您的示例代码与按钮事件一起使用，这就是为什么有单独的 JS，但所有逻辑都在 html 中。

popup.addEventListener('click', function(){
  overlay.classList.add('active');
});

overlay.addEventListener('click', function(e){
  if (e.target === overlay)
    overlay.classList.remove('active');
});

input {
  display: block;
}

input:nth-child(3){
  display: inline-block;
}

button {
  margin: 0 0.25em;
}

#overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
  display: none;
}

#overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  width: 300px;
  background-color: #fff;
  padding: 1em;
  display: flex;
  justify-content: flex-end;
}

<span tabindex=1 onFocus="document.querySelector('.autofocus2').focus()">Top cycke</span>
<input class="autofocus1" tabindex="2" autofocus="">
<input  tabindex="3">
<input  tabindex="4">
<button id="popup"  tabindex="5">Popup</button>
<input  tabindex="9">
<input  tabindex="10">

<div id="overlay">
  <div id="container">
    <span autofocus="" onFocus="document.querySelector('.innerautofocus2').focus()"></span>
    <button  tabindex="6" class="innerautofocus1">Cancel</button>
    <button tabindex="7" class="innerautofocus2" >OK</button>
    <span tabindex="8" onFocus="document.querySelector('.innerautofocus1').focus()">   </span>
  </div>
</div>

<span tabindex=11 onFocus="document.querySelector('.autofocus1').focus()">End Cycle</span>

行为如下：HTML 自动对焦甚至会触发对 tabindex 为 2 的第一项的关注。随后的选项卡将按顺序遍历所有 tabindexes，跳过隐藏的选项。如您所见，没有弹出框，索引 6-8 被跳过。当它到达末尾时，自动对焦会在列表中的第一项上触发新的焦点设置。

在弹出框处于活动状态时，一组新的自动对焦触发器会设置标签的内部循环，其逻辑与上述相同