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