如何通过使用Ionic2上的iPhone/iPad上的返回键来转到下一个输入

Question

我正在使用离子Cordova构建iPhone应用程序。我有一个登录屏幕用户名输入和密码输入以及提交按钮。输入用户名后，我无法专注于密码输入，然后点击"返回"。

我的login.html看起来像这样：

<ion-list >
     <ion-item>
<div id="loginlogo"></div>
     </ion-item>
      <ion-item>
        <ion-label stacked>Username</ion-label>
        <ion-input type="text" name="usernameInput"  (keyup.enter)="focusAndGo()" [(ngModel)]="usernameInput"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>Password</ion-label>
        <ion-input type="password" id="passwordInput"  name="passwordInput" [(ngModel)]="passwordInput"></ion-input>
      </ion-item>
     <ion-item><button (click)="logincontrol()" ion-button color="light" block>Login</button></ion-item>
    </ion-list>

和我的登录。TS看起来像这样：

@ViewChild('passwordInput') nameInput;
  focusAndGo()
  {
    var input = document.getElementById('passwordInput');
    input.focus();
    this.nameInput.setFocus();
    //this.nameInput.nativeElement.focus();
    //this.nameInput.nativeElement.setFocus();
    //this.passwordInput.focus();
    //alert(event.keyCode );
    //if( event.keyCode ==13)
    //{
    //this.passwordInput.focus;
    //}       
  }

我尝试了上面评论的所有内容。我无法让光标转到下一个输入。

Answer 1

我认为您应该在设置焦点之前防止默认行为，

将$事件发送到您的功能

<ion-input type="text" name="usernameInput"  (keyup)="focusAndGo($event)" [(ngModel)]="usernameInput"></ion-input>

并在设置focus

之前使用dext -deffault（）

focusAndGo(e)
{
    e.preventDefault();
    var input = document.getElementById('passwordInput');
    input.focus();     
}

Answer 2

更新为更好的剥离：此答案（我在收到upvote后更新了帖子，但我认为正确答案是链接中的指示）

这是一个古老的帖子，但假设性是

的指令

@Directive({
  selector: '[next-tab]',
})
export class NextTabDirective{
  @Input('next-tab') nextControl: any;
  @HostListener("keydown.enter", ["$event"])
  onEnter(event: KeyboardEvent) {
    if (this.nextControl.focus)
    {
      this.nextControl.focus();
      event.preventDefault();
      return false;
    }
  }
}

然后您可以使用

之类的表格

<form [formGroup]="dataForm" (submit)="submit(dataForm)">
   <input        formControlName="data1" [next-tab]="data2">
   <input #data2 formControlName="data2" [next-tab]="data3">
   <input #data3 formControlName="data3">
   <button type="submit">Click</button>
</form>