即使使用 tabindex="0"，交互式元素也不会通过 tab 获得焦点

Question

我构建了一个应用程序，可以在表格内外进行输入。我注意到使用 tab 键并没有循环遍历所有的交互元素。如果我将光标放在第一个输入字段中，我可以一直跳到表格的第一行（其中包含三个输入和一个按钮），但是，当我到达第二个输入字段并点击 Tab 键时，焦点返回到表行的第一个输入，而不是移动到第三个输入。如果我单击以关注表中的第三个输入，tab 一次将返回到表（它似乎专注于 tbody？），然后 tab 再次返回到表行中的第一个输入。正如预期的那样，Shift+tab 退出表格。我尝试添加tabindex="0"没有变化。

使用 JavaScript 生成的 HTML，问题代码从第 131 行开始：

// add cost per

            const costPer = newRow.insertCell();

            const costPerInput = document.createElement('input');

            costPerInput.className = 'input-table num';

            costPerInput.value = yarn.costPer;

            costPer.appendChild(costPerInput);

            costPerInput.addEventListener('blur', () => {

                yarn.costPer = costPerInput.value;

                saveData();

                displayData();

            });

关于为什么我不能浏览所有输入的任何想法？

Answer 1

这似乎不是标签索引问题，而是代码问题。我已经追踪到这段代码：// update new pattern yardage data and calculationspatternYardsInput.addEventListener('blur', () => {    pattern.yards = patternYardsInput.value;    saveData();    displayData();});在您关闭该输入后，这意味着它正在失去焦点（模糊），您正在调用displayData重写该 HTML 的方法。由于您关注的位置不再存在于 DOM 中，因此它会丢弃您使用 tab 键关注的位置。

Answer 2

当标签循环进入表格区域时，它开始循环表格上的元素，只需将 tabindex 属性添加到您的表格中，如下所示： tabindex=-1例如：<table&nbsp;tabindex=-1&nbsp;>