繁体   English   中英

Ionic 5 Angular 如何聚焦下一个输入?

[英]Ionic 5 Angular How to focus next İnput?

我有一个项目,当我在输入中写一些东西并按下电话键盘上的确定按钮时,我想关注下一个输入。 我该怎么做? 它是我的代码:感谢您的帮助!

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM