Set focus foward and backward to seperate input boxes based on the user input

@zaGbian wrote:

I am working on ionic 3 with angular 5 and typescript,my goal is to implement  input box for the passcode but I need six seperate boxes and each box should accept only one value and as soon as the user entered a value in a first input box the FOCUS should move to the next input box automatically and when the user cancelled a value in input box then the FOCUS should move to the previous input box.I have done this by using six different input boxes with six viewchild references and I am changing the FOCUS by using switch cases in my component.My implementation works perfectly fine when I type slowly into the input boxes but when I type fast I don't get the desire output infact I lost my FOCUS.Also I don't want login button.Below is my implementation...any improvement will be highly appreciable and PLEASE EXCUSE MY BAD ENGLISH..


<ion-content padding>
  <ion-list>
    <ion-item>
    <ion-label color="primary" stacked>ENTER MOBILE #</ion-label>
    <ion-input type="number" placeholder="Number Input"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>PASSCODE</ion-label>
  </ion-item>

    <ion-grid>
      <ion-row>

        <ion-col col-1 class="input-box">

          <ion-input type="password"
                     placeholder="1"
                     maxlength="1"
                     #passcode1
                     (keyup)="onKeyUp($event,1)">
          </ion-input>

        </ion-col>

        <ion-col col-1 class="input-box">

          <ion-input type="password"
                     placeholder="2"
                     maxlength="1"
                     #passcode2
                     (keyup)="onKeyUp($event,2)">
          </ion-input>

        </ion-col>

        <ion-col col-1 class="input-box">

          <ion-input type="password"
                     placeholder="3"
                     maxlength="1"
                     #passcode3
                     (keyup)="onKeyUp($event,3)">
          </ion-input>

        </ion-col>

        <ion-col col-1 class="input-box">

          <ion-input type="password"
                     placeholder="4"
                     maxlength="1"
                     #passcode4
                     (keyup)="onKeyUp($event,4)">
          </ion-input>

        </ion-col>

        <ion-col col-1 class="input-box">

          <ion-input type="password"
                     placeholder="5"
                     maxlength="1"
                     #passcode5
                     (keyup)="onKeyUp($event,5)">
          </ion-input>

        </ion-col>

        <ion-col col-1 class="input-box">

          <ion-input type="password"
                     placeholder="6"
                     maxlength="1"
                     #passcode6
                     (keyup)="onKeyUp($event,6)"
                     (input)="submit($event)">
          </ion-input>

        </ion-col>

      </ion-row>
    </ion-grid>

  </ion-list>
 <br>
 <br>
 <br>
 <p *ngFor="let v of values">{{v}}</p>
</ion-content>

My Component:-
import { Component, ViewChild, ElementRef, Renderer } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AlertController } from 'ionic-angular/components/alert/alert-controller';


@IonicPage()
@Component({
  selector: 'page-passcode-demo',
  templateUrl: 'passcode-demo.html',
})
export class PasscodeDemoPage {
  @ViewChild('passcode1') passcode1;
  @ViewChild('passcode2') passcode2;
  @ViewChild('passcode3') passcode3;
  @ViewChild('passcode4') passcode4;
  @ViewChild('passcode5') passcode5;
  @ViewChild('passcode6') passcode6;
  values:any=[];

  constructor(public navCtrl: NavController,
              private alertCtrl:AlertController) {

  }
    onKeyUp(event,index){
        console.log(event);
        if(event.target.value.length !=1){
          this.setFocus(index-2);
        }else{
          this.values.push(event.target.value);
          this.setFocus(index);
        }
        event.stopPropagation();
      }

    submit(e:Event){

        this.showSuccessfulLoginAlert();
        this.values=[];
        this.passcode1.value="";
        this.passcode2.value="";
        this.passcode3.value="";
        this.passcode4.value="";
        this.passcode5.value="";
        this.passcode6.value="";
        e.stopPropagation();

    }

    setFocus(index){

       switch(index){
         case 0:
         this.passcode1.setFocus();
         break;
         case 1:
         this.passcode2.setFocus();
         break;
         case 2:
         this.passcode3.setFocus();
         break;
         case 3:
         this.passcode4.setFocus();
         break;
         case 4:
         this.passcode5.setFocus();
         break;
         case 5:
         this.passcode6.setFocus();
         break;
         }
    }

    showInvalidLoginAlert() {
        let alert = this.alertCtrl.create({
          title: 'Invalid Login',
          subTitle: 'Please provide correct userName and passcode',
          buttons: ['OK']
        }).present();

      }

      showSuccessfulLoginAlert() {
        let alert = this.alertCtrl.create({
          title: 'Login Success',
          buttons: ['OK']
        }).present();

      }
}

Posts: 1

Participants: 1

Read full topic