HTML：无法使用 Tab 键访问链接

Question

我有一个页面，其中有一个带有输入字段块的表单。还有一个“添加另一个”按钮，允许添加更多与上述相同的块。

\n\n

只要页面上有多个输入字段块，用户就会看到“删除”链接，以允许他们从视图中删除相应的块。

\n\n

我的问题是，按 Tab 键时，“删除”链接永远不会突出显示。焦点移动到下一个块元素。

\n\n

我尝试过使用 Tab 索引，但它没有解决问题，因为 Tab 键不遵循顺序。

\n\n

<fieldset class="fieldset" id="fieldset-${receiptDetails.id}" style="width: 100%">\n    <legend style="display: none;">Receipt Detail Section - ${receiptDetails.id}</legend>\n    <label for="id" class="visually-hidden">Id: </label>\n    <input type="text" name="id" id="id" style="display: none" value="${receiptDetails.id}">\n\n    <div class="form-group">\n        <label class="claim-label" for="nameAddressOfSupplier" id="name-address-supplier-label">\n            [@spring.message "receipts-upload.supplier.name.address.label.text"/]\n        </label>\n        <textarea class="govuk-textarea" id="nameAddressOfSupplier-${receiptDetails.id}" name="nameAddressOfSupplier">${receiptDetails.nameAddressOfSupplier}</textarea>\n    </div>\n\n    <div class="form-group">\n        <label class="claim-label" for="purchaseDetails" id="purchase-details-label">\n            [@spring.message "receipts-upload.purchase.details.label.text"/]\n        </label>\n        <textarea class="govuk-textarea" id="purchaseDetails" name="purchaseDetails">${receiptDetails.purchaseDetails}</textarea>\n    </div>\n\n    <div class="custom-form-group">\n        <label class="claim-label" for="amount" id="amount-label">\n            [@spring.message "receipts-upload.amount.label.text"/]\n        </label>\n        <div class="currency-input">\n            <div class="currency-input__denomination">\xc2\xa3</div>\n            <input class="currency-input__field text-input" data-component="date-check-length" data-length="9" type="text" id="amount" value="${receiptDetails.amount}" name="amount" style="display: inline"> [#if numberOfReceiptDetails == 1]\n            <p class="remove-link visually-hidden" id="remove-link_${receiptDetails.id}" name="remove-link">\n                <span class=\'googleAnalyticsRemove\'>\n                        <a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"\n                           class="action--secondary remove-receipt-detail" style="float: right">\n                               [@spring.message "receipts-upload.remove.text"/]\n                        </a>\n                    </span>\n            </p>\n            [#else]\n            <p class="remove-link" id="remove-link_${receiptDetails.id}" name="remove-link">\n                <span class=\'googleAnalyticsRemove\'>\n                        <a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"\n                            class="action--secondary remove-receipt-detail" style="float: right">\n                                [@spring.message "receipts-upload.remove.text"/]\n                        </a>\n                    </span>\n            </p>\n            [/#if]\n        </div>\n    </div>\n</fieldset>\n\n<p class="add-another-link" id="add-another-link">\n    <a href="" id="add-another" class="action--secondary">\n               [@spring.message "receipts-upload.add.another.text"/]\n        </a>\n</p>\n

\n\n

当用户单击“添加另一个链接”时，另一个字段集将添加到视图中，并且每个字段集都可见一个“删除链接”。

\n\n

我希望在按下 Tab 键时从“input#amount”中到达每个字段集元素中的“remove-link”，但实际上按 Tab 键会突出显示包含在“textarea[name=nameAddressOfSupplier]”中下一个字段集。

\n\n

我将不胜感激任何建议。

\n

Answer 1

如果你没有使用hrefin<a>标签，tab键（tabindex）会跳过该标签，

如果添加tabindex="0"，tab 键将到达链接。

请参考帖子： 为什么`a`标签需要`tabindex=0`？