Angular - 按下 Enter 鍵后專注於下一個輸入字段

Question

KeyboardEvent.srcElement現在已棄用（根據我的 IntelliJ），TypeScript 現在使用KeyboardEvent.target 。

我的問題是：使用.target ，您如何訪問.srcElement曾經擁有的.nextElementSibling字段？ 我正在嘗試實現下面的代碼，以便在按下 Enter 鍵時關注 HTML 表單的下一個輸入字段。

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()
        }     
      
  }

希望它能解決你的問題！