Angular语言 - 按下Enter键后关注下一个输入字段

Question

KeyboardEvent.srcElement现在已弃用(根据我的IntelliJ)， TypeScript现在使用KeyboardEvent.target。

我的问题是:使用.target，您如何访问.srcElement曾经拥有的.nextElementSibling字段?我正试图实现下面的代码，以专注于HTML表单的下一个输入字段，当按下Enter键。

keytab(event){
let element = event.srcElement.nextElementSibling; // get the sibling element
if(element == null)  // check if its null
return;
else
element.focus();   // focus if not null
}```

Answer 1

解决这个问题的一种方法是根据输入字段的数量动态地为表单中的输入字段分配一个id。

然后为你想要的功能附加一个keyup触发器，比如

<form [formGroup]="myForm">
<div formArrayName="things">
<div *ngFor="let thing of things.controls; let i=index">
<label [for]="'input' + i">Thing {{i}}:</label>
<input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)="focusNext(i)"  />
</div>
</div>
</form>

为每个表单字段添加了动态id，并为要执行的操作定义了相关函数，如下所示

public focusNext(i) {
let nextElementSiblingId = 'input'+ i+1;
if (i<this.things.controls.length) {
document.querySelector(`#${nextElementSiblingId}`).focus()
}     

}

希望它能解决你的问题!