1

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

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>

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.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Johnny
  • 1,685
  • 6
  • 24
  • 42

2 Answers2

1

I think you should prevent default behaviour before setting focus,

send $event to your function

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

and use preventDefault() before setting focus

focusAndGo(e)
{
    e.preventDefault();
    var input = document.getElementById('passwordInput');
    input.focus();     
}
NTP
  • 4,338
  • 3
  • 16
  • 24
  • Thank you NTP. I will try and I will let you know the result. – Johnny Dec 23 '17 at 10:37
  • I'm glad I was able to help. – NTP Dec 23 '17 at 11:08
  • Hi NTP. Sorry I was away. I just tested when I tapped return the cursor didn't focused on password input. I put ```àlert('test');``` at the end of the function just to test if it is called. It is definitely pops an alert up when I tap return key but it is not focusing on password field. Do you have any other suggestion or and idea why it is not working? Thanks heaps for your help. – Johnny Dec 26 '17 at 15:24
1

Update for a better aproach: this SO answer (I updated the post after received an upvote, but I think the correct answer is the indicate in the link)

it's a old post but a posibility is make a directive like

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

then you can use a form like

<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>
Eliseo
  • 50,109
  • 4
  • 29
  • 67