How to move automatically to next input field

Ionic Framework ionic-v3
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

logintc-request-approve
logintc-request-approve.png1080×1920 32.5 KB

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();
    }
6 Likes
6

@Uxman , thanks ! I solved a super priority task with this resolution

7

Thank you ! :slight_smile: . Good solution