Angular 当我按下 tab 时如何正确控制元素聚焦的顺序

Question

嘿，我有 2 个关于在按 tab 键时将某些元素集中在页面上的问题

1. 在页面中切换时，空白时突出显示的选项卡不会聚焦。我需要那些即使在空的时候也能集中注意力的东西。

2. 聚焦的选项卡聚焦顺序错误。目前它是从左到右。 实际上，它应该从 atm 提款栏开始一直到底部，并在完成通过 ATM 后移动到 pos 购买栏。目前，tab 订单只是从 atm 取款到其他 atm 取款到最大限制到其他最大限制等。它需要从 atm 到最大限制到 perm 到 temp 所有在 atm 取款之前先在 tab 到另一列/

下面的HTML代码

<section id="atm-withdrawal-pos-purchase" class="atm-withdrawal-pos-purchase-moredet_innerGrid" role="region" aria-labelledby="hdrAccountDetailsGeneral">

  <div *ngIf="!showLoader">

    <div *ngIf="!isBUICEntitled && !valueNotReceivedFromCCAV" class="atm-withdrawal-pos-purchase-error-grid">

      <div class="atm-withdrawal-pos-purchase-error-grid-message">You do not have access for Change Limits</div>

    </div>

    <div *ngIf="valueNotReceivedFromCCAV" class="atm-withdrawal-pos-purchase-content-error-grid">

      <div class="atm-withdrawal-pos-purchase-modal-dialog-icon"><i class="sw-icon sw-icon-alert-error"></i></div>

      <div class="atm-withdrawal-pos-purchase-content-error-grid-message">

        <p class="atm-withdrawal-pos-purchase-content-detail">{{requestName}} {{enumMessage.WARNING_GENERIC_MESSAGE}}</p>

      </div>

    </div>

    <div *ngIf="isAccountDetailFailed" class="atm-withdrawal-pos-purchase-content-error-grid">

      <div class="atm-withdrawal-pos-purchase-modal-dialog-icon"><i class="sw-icon sw-icon-alert-error"></i></div>

      <div class="atm-withdrawal-pos-purchase-content-error-grid-message">

        <p class="atm-withdrawal-pos-purchase-content-detail">{{enumMessage.ACCOUNT_DETAILS_GENERIC_MESSAGE}}</p>

        <ul class="atm-withdrawal-pos-purchase-content-list">

          <li>{{accountDetailsFailureMsg}}</li>

        </ul>

      </div>

    </div>

    <div *ngIf="isBUICEntitled && !isAccountDetailFailed && !valueNotReceivedFromCCAV">

      <div class="atm-withdrawal-pos-purchase-moredet-general-grid">

        <div class="atm-withdrawal-pos-purchase-moredet-header-half">

          <h3 class="atm-withdrawal-pos-purchase-accnt-det-card-header atm-withdrawal-pos-purchase-header" id="hdrAccountDetailsGeneral">ATM Withdrawal</h3>

        </div>

        <div class="atm-withdrawal-pos-purchase-moredet-header-half">

          <h3 class="atm-withdrawal-pos-purchase-accnt-det-card-header atm-withdrawal-pos-purchase-linked-acc-right-header atm-withdrawal-pos-purchase-header" id="hdrAccountDetailsGeneralPOS">POS Purchase</h3>

          <div class="atm-withdrawal-pos-purchase-adrs-grid-head-link">

            <button title="Edit"

                    class="atm-withdrawal-pos-purchase-account-det-btn atm-withdrawal-pos-purchase-editBtn"

                    *ngIf="isEditEntitled && isThirdPartyEntitled"

                    (click)="validateAcca()"

                    [ngClass]="{'atm-withdrawal-pos-purchase-disabledEditButton': isEditable}"

                    [disabled]="isEditable"

                    [hidden]="!isVisible">

              Edit

            </button>

          </div>

        </div>

      </div>

 

      <div class="atm-withdrawal-pos-purchase-moredet-general-grid-row"

           [ngClass]="{'atm-withdrawal-pos-purchase-grid-row-edit': isEditable,'atm-withdrawal-pos-purchase-grid-row': !isEditable}">

        <div tabindex="0" class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">

          <label tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="default_limit">Default Limit</label>

          <input tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field atm-withdrawal-pos-purchase-padding-right-50"

                 aria-labelledby="hdrAccountDetailsGeneral default_limit" type="text" value="{{atmWithdrawalData?.defaultLimit}}" readonly="readonly">

        </div>

        <div class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">

          <label tabindex="0"class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="pos_default_limit">Default Limit</label>

          <input tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field"

                 aria-labelledby="hdrAccountDetailsGeneralPOS pos_default_limit" type="text" value="{{posPurchaseData?.defaultLimit}}" readonly="readonly">

        </div>

      </div>

      <div class="atm-withdrawal-pos-purchase-moredet-general-grid-row"

           [ngClass]="{'atm-withdrawal-pos-purchase-grid-row-edit': isEditable,'atm-withdrawal-pos-purchase-grid-row': !isEditable}">

        <div class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">

          <label tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="max_limit">Maximum Limit</label>

          <input tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field atm-withdrawal-pos-purchase-padding-right-50"

                 aria-labelledby="hdrAccountDetailsGeneral max_limit" type="text" value="{{atmWithdrawalData?.maximumLimit}}" readonly="readonly">

        </div>

        <div class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">

          <label tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="pos_max-limit">Maximum Limit</label>

          <input tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field"

                 aria-labelledby="hdrAccountDetailsGeneralPOS pos_max-limit" type="text" value="{{posPurchaseData?.maximumLimit}}" readonly="readonly">

        </div>

      </div>

      <div class="atm-withdrawal-pos-purchase-moredet-general-grid-row"

           [ngClass]="{'atm-withdrawal-pos-purchase-grid-row-edit': isEditable,'atm-withdrawal-pos-purchase-grid-row': !isEditable}">

        <div class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">

          <label tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="per_limit">Permanent Limit</label>

          <input tabindex="0" *ngIf="!isEditable" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field atm-withdrawal-pos-purchase-padding-right-50"

                 aria-labelledby="hdrAccountDetailsGeneral per_limit" type="text" value="{{atmWithdrawalData?.permanentLimit}}" readonly="readonly">

          <div *ngIf="isEditable"

               [ngClass]="{'atm-withdrawal-pos-purchase-edit-input-error-border': atmPermLimitErrorFlag,

        'atm-withdrawal-pos-purchase-focus-outline':atmPermLimitEleFocused}"

               class="atm-withdrawal-pos-purchase-edit-input-wraper atm-withdrawal-pos-purchase-padding-right-43px">

            <span tabindex="0" class="atm-withdrawal-pos-purchase-error-icon"

                  [ngClass]="{'atm-withdrawal-pos-purchase-disableErrorIconBg': atmPermLimitDisplayError}"

                  (mouseenter)="atmPermLimitDisplayError = true"

                  (mouseleave)="atmPermLimitDisplayError = false"

                  (focus)="atmPermLimitDisplayError = true"

                  (focusout)="atmPermLimitDisplayError = false"

                  tabindex="0"

                  aria-live="assertive"

                  aria-labelledby="atmPermLimitError"

                  [ngStyle]="{'visibility': atmPermLimit.errors?.atmLimitValidateError?'visible':'hidden'}">

              <div [innerHTML]="atmPermLimit.errors?.message"

                   class="adahidden"></div>

              <span class="sw-icon"

                    [ngClass]="{'atm-withdrawal-pos-purchase-error-icon-scale sw-icon-alert-error': !atmPermLimitDisplayError,'atm-withdrawal-pos-purchase-error-icon-scale-hover sw-icon-12-error-alert-white-tiny': atmPermLimitDisplayError}"></span>

            </span>

            <span class="atm-withdrawal-pos-purchase-edit-dollar-sign">$</span>

            <input atmLimitValidate="{{atmWithdrawalData.maximumLimit}}:PermanentLimit"

                   (focus)="atmPermLimitEleFocused = true;"

                   (focusout)="atmPermLimitEleFocused = false;"

                   (keydown)="restrictFirstZero($event)"

                   class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-edit-input-field"

                   aria-labelledby="hdrAccountDetailsGeneral per_limit" type="text"

                   [ngClass]="{'atmPermLimitError': atmPermLimit.errors?.atmLimitValidateError}"

                   (input)="onInputValueChange('AtmPermanentLimit')"

                   maxlength="4"

                   #atmPermLimitEle

                   #atmPermLimit="ngModel"

                   [(ngModel)]="atmPermanentLimit">

            <div *ngIf="atmPermLimitDisplayError && atmPermLimit.errors?.atmLimitValidateError && atmPermLimit.errors?.atmLimitValidateDisplayMessage"

                 role="alert" class="atm-withdrawal-pos-purchase-error-message-block">

              <div id="atmPermLimitError"

                   [innerHTML]="atmPermLimit.errors?.message"

                   class="atm-withdrawal-pos-purchase-error-message-block-container">

              </div>

            </div>

            <div tabindex="0" *ngIf="atmPermLimit.errors?.atmLimitValidateError">

              <span class="adahidden">

                Error in ATM Withdrawal Permanent Limit. {{atmPermLimit.errors?.message}}

              </span>

            </div>

          </div>

        </div>

        <div class="atm-withdrawal-pos-purchase-moredet-conte

我尝试设置特定的标签索引来更改顺序，但没有更改顺序