即使在使用 tabindex="0" 时，交互式元素也无法通过 tab 获得焦点

Question

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

使用 JavaScript 生成的 HTML，有问题的代码从第 131 行开始：https ://github.com/ykbell09/yarnCalculator/blob/master/index.js

 // 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(); });

申请： https : //distracted-wing-c0b75c.netlify.app/

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

Answer 1

这似乎不是选项卡索引问题，而是代码问题。 我已经追踪到这个代码：

// update new pattern yardage data and calculations
patternYardsInput.addEventListener('blur', () => {
    pattern.yards = patternYardsInput.value;
    saveData();
    displayData();
});

在您关闭该输入后，这意味着它正在失去焦点（模糊），您正在调用正在重写该 HTML 的displayData方法。 由于您关注的地方不再存在于 DOM 中，因此它会使用 Tab 键抛弃您关注的地方。

Answer 2

当Tab循环输入表区域时，它将开始循环表中的循环元素，只需将TabIndex属性添加到您的表中：TabIndex = -1

例如：

<table tabindex=-1 >