javascript - HTML:无法使用 Tab 键访问链接

Question

我有一个页面，其中有一个包含输入字段 block 的表单。还有一个按钮提供给“添加另一个”，它允许添加更多与上述相同的 block 。

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

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

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

<fieldset class="fieldset" id="fieldset-${receiptDetails.id}" style="width: 100%">
    <legend style="display: none;">Receipt Detail Section - ${receiptDetails.id}</legend>
    <label for="id" class="visually-hidden">Id: </label>
    <input type="text" name="id" id="id" style="display: none" value="${receiptDetails.id}">

    <div class="form-group">
        <label class="claim-label" for="nameAddressOfSupplier" id="name-address-supplier-label">
            [@spring.message "receipts-upload.supplier.name.address.label.text"/]
        </label>
        <textarea class="govuk-textarea" id="nameAddressOfSupplier-${receiptDetails.id}" name="nameAddressOfSupplier">${receiptDetails.nameAddressOfSupplier}</textarea>
    </div>

    <div class="form-group">
        <label class="claim-label" for="purchaseDetails" id="purchase-details-label">
            [@spring.message "receipts-upload.purchase.details.label.text"/]
        </label>
        <textarea class="govuk-textarea" id="purchaseDetails" name="purchaseDetails">${receiptDetails.purchaseDetails}</textarea>
    </div>

    <div class="custom-form-group">
        <label class="claim-label" for="amount" id="amount-label">
            [@spring.message "receipts-upload.amount.label.text"/]
        </label>
        <div class="currency-input">
            <div class="currency-input__denomination">£</div>
            <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]
            <p class="remove-link visually-hidden" id="remove-link_${receiptDetails.id}" name="remove-link">
                <span class='googleAnalyticsRemove'>
                        <a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"
                           class="action--secondary remove-receipt-detail" style="float: right">
                               [@spring.message "receipts-upload.remove.text"/]
                        </a>
                    </span>
            </p>
            [#else]
            <p class="remove-link" id="remove-link_${receiptDetails.id}" name="remove-link">
                <span class='googleAnalyticsRemove'>
                        <a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"
                            class="action--secondary remove-receipt-detail" style="float: right">
                                [@spring.message "receipts-upload.remove.text"/]
                        </a>
                    </span>
            </p>
            [/#if]
        </div>
    </div>
</fieldset>

<p class="add-another-link" id="add-another-link">
    <a href="" id="add-another" class="action--secondary">
               [@spring.message "receipts-upload.add.another.text"/]
        </a>
</p>

当用户点击“添加另一个链接”时，另一个字段集将添加到 View 中，每个字段集都有一个可见的“删除链接”。

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

如有任何建议，我将不胜感激。

Answer 1

如果您没有使用 href在 <a> tag，tab键(tabindex)会跳过那个tag，

如果您添加 tabindex="0" , Tab 键将到达链接。

请引用帖子:Why would an `a` tag need `tabindex=0`?