在 Angular 中按 Tab 时聚焦下一个输入答案

【问题标题】：Focus next input when pressing Tab in Angular在 Angular 中按 Tab 时聚焦下一个输入
【发布时间】：2021-09-13 16:33:25
【问题描述】：

我的屏幕上有多个可编辑的输入。

在这些可编辑输入之间，我有按钮和禁用输入。

实际行为是当我按下 Tab 键时，当前输入和下一个输入之间的 html 元素获得焦点。我应该按 Tab 直到我到达我的兄弟输入。

这种行为不是我想要的。

我期待的是，当我按下 Tab 键时，下一个所需的输入会得到焦点。

这里是一个简化的代码

    <ng-container #form *ngFor="let elm of elms; let currIndex = index" cdkTrapFocus
        [cdkTrapFocusAutoCapture]="true">
      <app-item [index]="currIndex">
    Here I get a line with : span, disabled input , editable input then a button
      </app-item>
    </ng-container>

由于app-item 中的复杂嵌套html元素，我尝试使用一个指令来关注下一个兄弟，这取决于它不起作用。

我想知道是否有一个更简单的解决方案，使用Angular CDK 并使用tab 键“标记”需要关注的项目？

【问题讨论】：

标签： javascript html angular angular-material

【解决方案1】：

您可以为输入元素动态添加tabindex="-1"属性，当您点击tab键时，该元素将被跳过。

所以在每个按钮和禁用输入上，只需添加tabindex="-1" 属性。

<input tabindex="-1" />

【讨论】：