如何使用Ionic2在iPhone / iPad上点击返回键进入下一个输入？

问题描述

我正在使用Ionic Cordova构建iPhone应用程序。我有一个登录屏幕用户名输入和密码输入加上一个提交按钮。输入用户名后我无法关注密码输入并点按返回。

I am using Ionic Cordova to build an iPhone app. I have a login screen username input and password input plus a submit button. I cannot make to focus on password input after typing the username and tap "return".

我的login.html如下所示：

My login.html looks like this:

<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看起来像这样：

and my login.ts look like this:

@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;
    //}
  }

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

I tried everything that is commented above. I cannot get cursor to move to next input.

推荐答案

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

I think you should prevent default behaviour before setting focus,

向您的函数发送$ event

send $event to your function

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

并在设定焦点前使用preventDefault（）

and use preventDefault() before setting focus

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

这篇关于如何使用Ionic2在iPhone / iPad上点击返回键进入下一个输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！