布局中绝对定位元素的制表符索引

Question

绝对位置元素的标签索引

暂时，假设我编写了以下代码：

    <header class="header hap" [ngClass]="authority">
        <div class="header-inner">
            <div class="header-identity">
                <a id="theLogo" class="logo" [routerLink]="[links.home]" title="Navigate to Home">
                    <img src="assets/logo-white.svg" alt="Logo">
                </a>
                <span class="client-logo" *ngIf="user.brandingImage && !user.isTheAdmin()">
                    <img class="brandingImage" [src]="user.brandingImage" [alt]="user.brandingName" onerror="this.style.display='none'">
                </span>
                [ more links ]
            </div>
            <nav class="main-nav for authenticated" [ngClass]="{'active':showMenu, 'app-only':!isCurrPageAdminApp()}">
                <button class="menu" (click)="toggleMenu()">Menu</button>
                <div class="main-nav-flyout" *ngIf="showMenu">
                    <div class="nav-header">
                        <ul>
                            <li>
                                <a id="main-nav-profile" [routerLink]="['/profile']"><span class="icon icon-user2"></span> My Profile</a>
                            </li>
                            [ more dropdown items ]
                        </ul>
                        <a id="main-nav-close" class="close"(click)="onClickMenuClose()"><span class="icon-cross"></span></a>
                    </div>
                    <div class="nav-body">
                        <ul *ngIf="isCurrPageAdminApp()" class="main-nav-list">
                            <li class="current-app">Administrative Tools</li>
                            <li><a id="main-nav-xAdmin" *ngIf="user.isTheAdmin()" [routerLink]="['admin/x']">X Admin</a></li>
                            [ more links ]
                            <li>
                                <span>Reports</span>
                                <ul>
                                    <li class="user-status"><a id="main-nav-userStatusReport" [routerLink]="['admin/reports/userStatus']">User Status</a></li>
                                    [ more links ]
                                </ul>
                            </li>
                        </ul>
                        <ul class="app-list" *ngIf="user.userApplications">
                            <li *ngIf="showTheLink()">
                                <a id="app-list-type" [routerLink]="['/']">
                                    ...
                                </a>
                            </li>
                            [ more links ]
                            <li *ngFor="let application of user?.userApplications">
                                <a id="app-list-{{application.abbreviation}}" *ngIf="!isAdminApp(application)" (click)="onClickMenuItem(application)">
                                    {{ application.title }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <nav class="user-nav for authenticated" role="menu">
                <span *ngIf="user.brandingName" class="user-location">{{user.brandingName}}</span>
                <span *ngIf="user.brandingName" class="pipe">|</span>
                <a id="user-nav-profile" class="user-name" [routerLink]="['/profile']">
                    <span class="name">{{user?.firstName}} {{user?.lastName}}</span>
                </a>
                <a id="user-nav-logout" class="logout" [routerLink]="['/', 'logout']">Log out</a>
            </nav>
        </div>
    </header>

问题

各种元素 - 可能 .header-inner > * - 使用 position: absolute; 设置样式，因此 tabindex-order 对于在标记中稍后声明但几何位置较早的元素是倾斜的在布局中。

问题

有没有办法强制 tabindex 成为所有自然索引 (0) 除了需要切换的 2 个项目 - 以可扩展的方式同时没有为布局中的每个新项目实施 tabindex？

Answer 1

简短的回答是否定的，如果不至少将 tabindex 添加到流程中必须在这两个元素之前聚焦的每个元素，就不可能仅切换两个元素。

所有具有正值 tabindex 的元素将以增量方式首先获得焦点，或者如果它们具有相同的值，则按照它们的源顺序，所有具有默认值或零的元素将最后获得焦点。

因此，如果您有 6 个可聚焦元素，并且您希望元素 5 和 6 聚焦在元素 1 和 2 之后，您需要这样的东西：

<input type="text" tabindex="1">1</input>
<input type="text" tabindex="1">2</input>
<input type="text">3</input>
<input type="text">4</input>
<input type="text" tabindex="1">5</input>
<input type="text" tabindex="1">6</input>

一般来说，让源顺序与流程相匹配是最简单的方法。

有一种情况比较简单。如果您要移动的元素恰好是需要在您的页面上获得焦点的第一个元素，那么在这种特定情况下，您可以仅将 tabindex 放在这些元素上。

例如，如果我们希望元素 5 和 6 成为页面上的第一个元素，然后是它们之后的所有其他元素，您需要做的就是：

<input type="text">1</input>
<input type="text">2</input>
<input type="text">3</input>
<input type="text">4</input>
<input type="text" tabindex="1">5</input>
<input type="text" tabindex="1">6</input>

所以一般来说，如果您要更改顺序的元素在页眉中，并且它们是您页面上应该首先关注的内容，那么重新排列它们并让页面的其余部分应该很容易顺其自然。

如果元素必须放在最后，那你就不走运了，你应该：

将它们放在标记的最后，以便它们自然流动
使用 tabindex=-1 将它们从流程中移除，并让用户手动聚焦

布局中绝对定位元素的制表符索引

Tab-Index for absolutely positioned elements in layout

html

css

css-position

absolute

tabindex

绝对位置元素的标签索引

问题

问题