使用 angular 將 keyup.enter 與 tab 綁定

Question

有人知道如何將 keyup.enter 屬性綁定到鍵盤的選項卡嗎？ 我的意思是我希望當我在表單的第一個字段中輸入值時，我會在第二個字段中彈出。 喜歡：

<form>
<label for="xxx">first:
 <input type="text" id="first" name="first" (keyup.enter)="enterFirst(firstName)">
</label>
<label for="xxx">second:
 <input type="text" id="second" name="second" (keyup.enter)="enterSecond(lastName)">
</label>
.
.
.
<button type="button" class="btn btn-success" (click)="sendNames(xxx)">valid</button>
</form>

因此，當我給出名字並單擊 Enter 時，我將能夠在第二場比賽中出現。

有人有想法嗎？ 提前致謝

Answer 1

這應該有效，雖然它是普通的 JS：

<input type="text" id="first" name="first" onkeyup="if (event.keyCode == '13') {enterFirst(this)}">

（編輯：用“this”替換“firstName”）

Answer 2

HTML：

   <h1>Here we will try to bind  the keyup.enter with Tab</h1>
   <div class="container">
   
     <h2>Please enter datas an click on enter</h2>
     <form>
       <div class="row">
         <div class="form-group col">
           <label for="fname">Enter your firstname:</label>
           <input type="text" class="form-control" placeholder="enter your firstname and click enter"
         id="fname" name="fname" onkeyup="if (event.keyCode == '13') {enterFirst(this)}">
         </div>
         <div class="form-group col">
           <label for="lname">Enter your lastname:</label>
           <input type="text" class="form-control" placeholder="enter your lastname and click enter"
         id="lname" name="lname" onkeyup="if (event.keyCode == '13') {enterLast(this)}">
         </div>
       </div>
       <button type="button" class="btn btn-success" (click)="sendData()">submit</button>
     </form>
   
   </div>

:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angulartest';
  public firstname: string;

  constructor(){}

  ngOninit(){

  }

  enterFirst(firstname){
    console.log(firstname);
  }

  sendData(){

  }
}

我寫它只是為了看看我是否可以通過在名字后面點擊輸入來跳到姓氏字段