Javascript 如何恢复tab键的正确功能并遍历所有表单输入？

我正在建立一个交互式速度计算器，我希望桌面浏览器用户能够导航，并提供输入使用键盘单独如果他们愿意

代码笔在这里：

我尝试在所有表单输入上使用tabindex=“0”属性，以及允许用户从几个流行的跑步事件距离中进行选择的列表项上实现这一点

如果我在不进行选择的情况下对元素进行tab操作，则在表单上进行tab操作效果很好，但是一旦我从“距离”输入的弹出选项中选择了一个值，tab键就会停止工作

关于代码有什么问题，以及在输入第一个输入值后需要更改什么以恢复tab键的预期行为，有什么建议吗

html的相关部分：

<?xml version="1.0" encoding="UTF-8"?>
<div class="form-group center-content distance-input">
  <label class="col-form-label" for="race-distance">
    <input size="10" type="text" tabindex="0" id="race-distance" v-model:value="input_distance" class="btn btn-outline-light form-control-lg-border border-light" on:blur="modalTrackEvent" v-on:focus="modalTrackEvent" rows="1" v-on:change="modalTrackEvent" v-on:keyup="modalTrackEvent" placeholder="Distance" />
  </label>
  <!--CHANGE DISTANCE UNITS -->
  <!--COMMON RACE LENGTHS -->
  <div class="event-modal track-evt-list" v-bind:class="[ismodalvisible ? 'observable' : 'invis']" tabindex="0">
    <ul>
      <li class="btn btn-outline-light" v-bind:class="[ismodalvisible ? 'observable' : 'invis']" v-on:keyup.enter="setInputDist" v-on:mousedown="setInputDist"  v-for="(trackevt, idx) in trackevent" v-bind:key="idx" v-bind:raceid="idx" tabindex="0">{{ trackevt.id }} {{ trackevt.label }}</li>
    </ul>
  </div>
</div>

{{trackevt.id}{{trackevt.label}

选项卡键仍在工作。只是因为您使用CSS

opacity

在

invi

类中使用

opacity:0

隐藏元素（在

observed

类中使用

opacity:1

），所以tab键也会在所有这些“隐藏”按钮之间循环（它们仍然存在，只是透明的）。只要继续按tab键，你最终会看到光标出现

如果您在CSS中使用并替换

不透明度：1

为

可见性：可见

，

不透明度：0

为

可见性：隐藏

，它应该可以正常工作。（具有

可见性的元素：隐藏的
将不属于选项卡键循环的一部分。）

一个有效的代码笔示例。
好的，我明白了！可见性工作得非常好，我没有意识到它会像css转换的不透明一样工作，但它更好地代表了期望的效果。非常感谢！即使可见性在转换中不起作用，我认为您可以将它们都放在CSS中。