嘿，我有兩個(gè)關(guān)于在按tab鍵時(shí)聚焦頁面上某些元素的問題
空時(shí)高亮顯示的選項(xiàng)卡在瀏覽頁面時(shí)不聚焦。我需要它們即使在空著的時(shí)候也能集中注意力。
獲得焦點(diǎn)的選項(xiàng)卡以錯(cuò)誤的順序聚焦。此刻它正從左向右移動(dòng)。 實(shí)際上，它應(yīng)該從atm取款欄開始向上到底部，并在m完成時(shí)移動(dòng)到pos購買欄。此時(shí)，標(biāo)簽訂單只是從AT M取款到其他atm取款，到最大限額，再到其他最大限額，等等。它需要從自動(dòng)柜員機(jī)到最大限額到perm到temp，在跳轉(zhuǎn)到另一列之前，首先從自動(dòng)柜員機(jī)提款
下面的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我試圖設(shè)置特定的選項(xiàng)卡索引來改變順序，但順序沒有改變