Question

我有两个输入框，用户输入其凭据，然后单击调用身份验证过程的跨度。它在手机上效果很好，但是对于笔记本电脑/台式机，我听说他们更喜欢使用 Tab 在三个控件之间跳转。

目前，只有输入框可用于设置标签（可聚焦，可选？），我想知道是否可以通过按Tab键轻松使span元素可访问。我不想创建用于检测儿童等的完整逻辑，因为这太复杂且缺乏动力。

<span class="nav-item">
  <input [(ngModel)]="userName">
</span>
<span class="nav-item">
  <input [(ngModel)]=password>
</span>
<span class="nav-item"
      (click)="authenticate()">
  <fa-icon [icon]="faSignInAlt"></fa-icon>
</span>

我已经对其进行了搜索，但相关的匹配很少。最好的方法是将跨度更改为按钮并设置其格式。

Answer 1

您可以向其中添加tabindex。

<span class="nav-item">
  <input [(ngModel)]="userName">
</span>
<span class="nav-item">
  <input [(ngModel)]=password>
</span>
<span class="nav-item"
      (click)="authenticate()" tabindex="0">
  <fa-icon [icon]="faSignInAlt"></fa-icon>
</span>

如何通过按Tab键使图标/跨度可选？

1 个答案: