Ionic input field does not move to next field automatically
You can use the following approach, there could be better approaches i'm just sharing what i know.
What i am doing here is setting a reference of the next element (eg: #b
), and on keyup event i am passing that reference to my function in .ts
file which only calls the .setFocus()
on the referenced element.
<ion-grid>
<ion-row>
<ion-col>
<ion-item >
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" (keyup)="moveFocus(b)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="2" #b (keyup)="moveFocus(c)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="3" #c (keyup)="moveFocus(d)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="4" #d ></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
.ts:
import { Component } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor() {
}
moveFocus(nextElement) {
nextElement.focus();
}
}