即使使用 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 calculations

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

    pattern.yards = patternYardsInput.value;

    saveData();

    displayData();

});

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

Answer 2

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

例如：

<table tabindex=-1 >