Tab键无法聚焦Remove链接的前端技术问题求助

看起来问题的核心在于你的Remove链接<a>标签缺少href属性，这直接导致它无法被Tab键纳入焦点流。下面是具体的分析和修复方案：

问题根源 #

默认情况下，只有带有href属性的<a>标签才会被浏览器视为可交互的链接元素，从而加入Tab键的焦点遍历序列。你的Remove链接代码里的<a>没有href属性，所以Tab键会直接跳过它，转而聚焦到下一个可交互元素（也就是下一个区块的输入框）。

具体修复步骤 #

1. 给Remove链接添加href="#"并阻止默认跳转 #

修改Remove链接的<a>标签，补充href="#"属性，同时在点击事件中阻止默认的锚点跳转行为，避免页面滚动到顶部：

<a id="remove-receipt-detail_${receiptDetails.id}" 
   name="remove-receipt-detail" 
   class="action--secondary remove-receipt-detail" 
   style="float: right"
   href="#">
    [@spring.message "receipts-upload.remove.text"/]
</a>

然后在对应的JavaScript点击事件处理中添加event.preventDefault()：

document.querySelectorAll('.remove-receipt-detail').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认锚点跳转行为
    // 执行你的区块移除逻辑
    const targetFieldset = this.closest('.fieldset');
    targetFieldset.remove();
    // 这里可以添加其他逻辑，比如更新receipt数量统计等
  });
});

2. 验证DOM顺序的正确性 #

从你的代码结构来看，p.remove-link紧跟在同组的input#amount之后，这个DOM顺序是符合Tab键遍历逻辑的（Tab按DOM顺序遍历元素），所以不需要调整结构。

3. 兜底方案：显式设置tabindex="0" #

如果添加href后仍有问题，可以给Remove链接显式设置tabindex="0"，确保它按正常顺序加入焦点流，且不会破坏默认Tab顺序：

<a id="remove-receipt-detail_${receiptDetails.id}" 
   name="remove-receipt-detail" 
   class="action--secondary remove-receipt-detail" 
   style="float: right"
   href="#"
   tabindex="0">
    [@spring.message "receipts-upload.remove.text"/]
</a>

测试验证 #

修复后按以下流程测试：

• 聚焦到某组的amount输入框
• 按下Tab键，焦点应正确移动到同组的Remove链接
• 再次按下Tab，焦点跳转到下一个区块的nameAddressOfSupplier文本域，符合预期逻辑。

内容的提问来源于stack exchange，提问作者Abhinav Mehrotra