如何通过按角度 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>