ios - 如何通过使用 Ionic2 在 iPhone/iPad 上点击返回键转到下一个输入？

Question

我正在使用 Ionic 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>

我的 login.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

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

发送 $event 到你的函数

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

并在设置焦点之前使用 preventDefault()

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