如何通过按 Tab 键选择 icon/span？

Question

我有两个输入框，用户输入他们的凭据，然后单击调用身份验证过程的范围。它在 phone 上运行良好，但对于 laptop/desktop，我被告知他们更喜欢使用 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>

我用谷歌搜索了它，但几乎没有找到相关的结果。最好的办法是将 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 键选择 icon/span？

How to make an icon/span selectable by pressing Tab key?

html

tabs

focus

angular