如何通過按角度 6 中的鍵盤輸入將光標從一個輸入移動到另一個輸入和按鈕

Question

從登錄設計頁面，我必須將光標從Username移動到Password <input> ，以及從Password到<button>單擊事件的相同過程，以便我可以通過按鍵盤輸入鍵登錄到我的頁面，在角 6。

我的 HTML 代碼如下：

  <div class="ibox-content login-form">
            <div class="form-group">
                <input type="text" class="form-control" id="inputUername" placeholder="Username" [(ngModel)]="loginData.username" autofocus >
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" [(ngModel)]="loginData.password" >
            </div>
            <button type="submit" icon="fa fa-sign-in" class="btn btn-primary" [disabled]="loginData.username == '' || loginData.password == ''"
                (click)="login()">Login</button>
            <div class="login-error-message" *ngIf="content.loginFailed">
                <p>Invalid username or password</p>
            </div>
        </div>

Answer 1

使用 (keyup.enter) = "focusablePassword.focus()" 輸入用戶名並調用 #focusablePassword 輸入密碼，這將執行任務和按鈕相同，如下面的代碼所示。

     <div class="ibox-content login-form">
            <div class="form-group">
                <input type="text" class="form-control" id="inputUername" placeholder="Username" [(ngModel)]="loginData.username" autofocus  (keyup.enter)="focusablePassword.focus()">
            </div>
            <div class="form-group">
                <input #focusablePassword type="password" class="form-control" id="inputPassword" placeholder="Password" [(ngModel)]="loginData.password" (keyup.enter)="focusableSubmit.focus()" >
            </div>
            <button #focusableSubmit type="submit" icon="fa fa-sign-in" class="btn btn-primary" [disabled]="loginData.username == '' || loginData.password == ''"
                (click)="login()">Login</button>
            <div class="login-error-message" *ngIf="content.loginFailed">
                <p>Invalid username or password</p>
            </div>
        </div>