时间戳

首页 > 解决方案 > 布局中绝对定位元素的 Tab-Index

html - 布局中绝对定位元素的 Tab-Index

问题描述

绝对位置元素的选项卡索引

暂时，假设我写了下面的代码：

    <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 对于在标记中稍后声明但在布局中几何位置较早的元素倾斜。

问题

有没有办法强制除需要切换的 2 个项目之外的tabindex所有自然索引 ( ) - 以可扩展的方式，而不必为布局中的每个新项目实现？0tabindex

标签： htmlcsscss-positionabsolutetabindex

解决方案

简短的回答是否定的，不可能只切换两个元素而不至少添加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>

一般来说，让源订单与流程匹配是使其工作的最简单方法。

有一种更简单的特殊情况。如果您要移动的元素恰好是需要关注页面的第一个元素，那么在这种特殊情况下，您可以将tabindexonly 放在这些元素上。

例如，如果我们希望元素 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并让用户手动聚焦

推荐阅读