Ionic 5 Angular How to focus next İnput?

Question

I have a project and when i write something in input and press okay button on phone keyboard i want to focus next input. How can i do it ? Its my codes : Thanks for help !

 <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>

what does your focusNext() function look like? Show your code, what you've tried and where it's breaking. — Kinglish, May 03 '21 at 23:05
@JohnTyner Thats how i stucked i guess. I dont know how can i reach my inputs on .ts file so i did nothing on .ts. And im sorry i dont know how can i use focusNext() function can you tell me how can i use it ? or can you send me any source for i learn ? i cant find on internet — Uğurcan Uçar, May 03 '21 at 23:09
https://stackoverflow.com/questions/53690973/change-behaviour-of-enter-key-in-a-phone-angular-5/53691367#53691367 — Eliseo, May 04 '21 at 06:41

score 0 · Answer 1 · answered May 04 '21 at 12:09

html file using #passwordInput to focus on specific input

<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{
      }
    }
  }

Ionic 5 Angular How to focus next İnput?

1 Answers1