logo标签列表

HTML：使用Tab键无法到达链接

javascripthtml
6
我有一个页面，其中有一个表单，其中包含一组输入字段。还提供了一个“添加另一个”按钮，允许添加与上述相同的更多块。
只要页面上有多于一个输入字段块，用户就可以看到“删除”链接，以便他们将相应的块从视图中删除。
我的问题是，在按Tab键时，“删除”链接从未被突出显示。焦点移动到下一个块元素。
我尝试使用tabindex，但它没有解决问题，因为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>

用户点击“添加其他链接”时，视图中会添加另一个字段集，并为每个字段集显示“删除链接”。
我期望在按下Tab键时从“input＃amount”中访问每个字段集元素中的“remove-link”，但实际上，Tab键按下后会突出显示下一个字段集中包含的“textarea [name = nameAddressOfSupplier]”。
如果您有任何建议，我将不胜感激。
1个回答
6
那么我需要在<a>标签中提供href，还是提供tabindex="0"？ - Abhinav Mehrotra
是的，我认为是这样 - Annaimahalingam
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接