How to move automatically to next input field


#1

Am developing an android app using ionic.

For authentication am using 4 pin password.
But the problem is its not automatically redirecting from one field to another field.
Custom made UI for my project I had taken the separate field for each digit.
My login UI looks like below screenshot

Can anyone guide me that how to navigate automatically like an iPhone if we enter the pin


#2

try something like (keyup)="nextSetPin($event, setPin2) on Pin1 and then in the nextSetPin method call setFocus() on the element you pass across.


#3

By the way what method did you use for displaying the dots rather than the numbers? I was thinking of something similar and wasn’t sure of the best (neatest) way of doing it (would use a password field but I wanted a numeric keypad option like you have)


#4

Hello,
Thank you for your response.
Can you show me sample code regarding html elements
Am new to IONIC i was unable to understand how to use above snippet code


#5

First of all:

  1. Use ‘#’ all the elements in the html
    like this
    <ion-input #Field1 (keyup)="gotoNextField(Field2)" </ion-input>
    <ion-input #Field2 (keyup)="gotoNextField(Field3)" </ion-input>
    <ion-input #Field3 (keyup)="gotoNextField(Field4)" </ion-input>
    <ion-input #Field4 (keyup)="finishFunction()" </ion-input>

  2. use this function
    in the .ts


  gotoNextField(nextElement)
        nextElement.setFocus();
    }