Question

我正在为其中一个项目使用Angular 5。在我的组件之一中，我有一个HTML表，其中有input个字段。

现在，我需要此输入字段的键盘快捷键，例如，如果用户按enter键，则下一个输入字段应为焦点。如果用户按backspace键，则只关注前一个字段。

我先前在jQuery中使用$(this).next('input').focus();和$(this).prev('input').focus();完成了这种操作。

现在我该如何在Angular 5中做同样的事情？

此外，在某些情况下，我在此嵌套表中有嵌套表和输入字段。我需要在这些输入字段上具有相同的行为（仅.next()和.prev()是不够的，我们需要从DOM中查找下一个输入字段）。

我该如何实现？请帮忙。

编辑

到目前为止我尝试过的

<input id="first_element_{{i}}" type="text" class="form-control" #particular [required]="transaction.amount" [(ngModel)]="transaction.selectedAccount.account" (keyup)="searchAccount($event?.target?.value);" (focus)="onAccountFocus(transaction.type === 'A' ? amountField1 : amountField2, transaction.type, i);" (blur)="onAccountBlur($event);" [ngClass]="{'focus': isSelectedRow && selectedIdx === i}" (keydown)="detectKey($event)" (keydown.Tab)="validateAccount(transaction, $event, i)">

我添加了(blur)，(keydown)和(keydown.Tab)以实现这一目标，但最后我无法找到确切的next和prev元素来自dom。

Answer 1

您可以使用'@ViewChildren（'name'）'输入：QueryList并将'#name'放在可聚焦的输入上。这将为您提供一个可以聚焦的ElementRef的queryList（element.nativeElement.focus（））。对我来说，您应该使用类似于'@HostListener（'window：keyup'，['$ event']）'的HostListening来触发每个按键事件，因此在内部可以获取输入列表，输入触发事件的输入（ $ event）。只是将可聚焦的逻辑放入其中！希望对您有帮助！

如何在Angular 5中遍历dom

1 个答案: