Ionic 5 Angular 如何聚焦下一个输入？答案

【问题标题】：Ionic 5 Angular How to focus next İnput?Ionic 5 Angular 如何聚焦下一个输入？
【发布时间】：2021-07-26 07:56:15
【问题描述】：

我有一个项目，当我在输入中写一些东西并按下手机键盘上的确定按钮时，我想关注下一个输入。我该怎么做？这是我的代码：感谢您的帮助！

 <ion-list style="margin-top: 10%;">
<ion-item>
  <ion-label  position="floating" style="color: thistle; font-size: 20px;">Adınız : </ion-label>
  <ion-input  type="text" [(ngModel)]="user.name" (keyup.enter)="focusNext()" id="inputname" style="color:white" placeholder="Adınızı buraya giriniz.">
  </ion-input>
</ion-item>

<ion-item>
  <ion-label  position="floating" style="color: thistle; font-size: 20px;">Soyadınız : </ion-label>
  <ion-input type="text" id="inputsurname" [(ngModel)]="user.surname" style="color:white"
    placeholder="Soyadınızı buraya giriniz."></ion-input>
</ion-item>
<ion-item>
  <ion-label position="floating" style="color: thistle; font-size: 20px;">Email : </ion-label>
  <ion-input  type="email"  id="inputemail" [(ngModel)]="user.email" style="color:white"
    placeholder="Email adresinizi buraya giriniz."></ion-input>
</ion-item>
<ion-item>
  <ion-label position="floating" style="color: thistle; font-size: 20px;">Telefon Numaranız : </ion-label>
  <ion-input  type="number" id="inputtel" [(ngModel)]="user.telno" style="color:white"
    placeholder="Telefon Numaranızı buraya giriniz."></ion-input>
</ion-item>
<ion-item>
  <ion-label position="floating" style="color: thistle; font-size: 20px;">Şifreniz : </ion-label>
  <ion-input  type="password" id="inputpass" [(ngModel)]="user.password" style="color:white"
    placeholder="Şifrenizi buraya giriniz."></ion-input>
</ion-item>

【问题讨论】：

你的 focusNext() 函数是什么样的？显示您的代码、您尝试过的内容以及出现问题的地方。
@JohnTyner 我猜我就是这样卡住的。我不知道如何才能在 .ts 文件上输入我的信息，所以我在 .ts 上什么也没做。对不起，我不知道如何使用 focusNext() 函数你能告诉我如何使用它吗？或者你能给我发任何资料让我学习吗？我在网上找不到
stackoverflow.com/questions/53690973/…

标签： angular ionic-framework ionic4 ionic5

【解决方案1】：

html file 使用#passwordInput 专注于特定输入

<ion-item>
              <ion-input type="email" placeholder="Email" [(ngModel)]="loginparams.username"
                (keypress)="onKeyPressed($event,'email')" enterkeyhint="next"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input type="password" placeholder="Password" [(ngModel)]="loginparams.password" enterkeyhint="done"
                (keypress)="onKeyPressed($event,'password')" #passwordInput></ion-input>
            </ion-item>

tsfile

@ViewChild('passwordInput', { static: false }) passwordInput;
onKeyPressed(event: any, fieldType?: any) {
    if (event.keyCode == 13) { // click on enter focus to passwprd field
      if (fieldType == 'email') {
        this.passwordInput.setFocus();
      } else{
      }
    }
  }

【讨论】：