Angular

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。

然后为您想要的功能附加一个按键触发器，例如

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

希望它能解决您的问题！

Angular - 按下 Enter 键后聚焦于下一个输入字段

Angular - Focus on next input field after pressing the Enter key

html

typescript