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

Question

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

HTML 使用 JavaScript 生成，问题代码从第 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

当tab循环进入table区域时，开始循环table上的元素，只需将 tabindex 属性添加到您的 Table 就像这样： tabindex=-1

例如：

<table tabindex=-1 >

Answer 2

这似乎不是标签索引问题，而是代码问题。我已经追踪到这段代码：

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

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

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

interactive elements not receiving focus with tab, even when using tabindex="0"

html

javascript

input

keyboard-events