javascript - 如何在没有 JavaScript 的情况下分离键盘 Tab 键旋转组？

Question

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

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

以下面的demo为例，如果你按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>

是否有一种内置方法可以在定义的范围(即父元素)内绑定(bind)循环组，以便制表符只会在同级元素之间循环？

编辑

我知道如何使用 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 被跳过。当它到达末尾时，自动对焦会在列表中的第一项上触发新的焦点设置。

在弹出框处于事件状态的情况下，一组新的自动对焦触发器使用与上述相同的逻辑设置选项卡的内部循环