The ion input field does not automatically move to the next field

Question

Im using ion 3 for my mobile application, I have some problems with my input fields that don't move automatically to the next field. For example, when I press the first input entered and fill in the first, the cursor does not move to the next field. How to do it right?

 <ion-grid>
      <ion-row>
        <ion-col>
          <ion-item >
            <ion-input type="tel" placeholder="*" maxlength="1" tabindex="1"   ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="2"  ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="3"  ></ion-input>
          </ion-item>
        </ion-col>
        <ion-col >
          <ion-item>
            <ion-input type="tel" placeholder="*" maxlength="1"  tabindex="4"   ></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>

    </ion-grid>

Answer 1

You can use the following approach, there may be better approaches, I'm just sharing what I know.

What I'm doing here is setting a link to the next element (for example:) #b, and in the event of an event, #bI pass this link to my function in a file .tsthat calls only .setFocus()for the reference 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();
          }

        }

Answer 2

- (keyup) (keydown). angular , .

HTML

<input (keyup)="onKey($event)">

.ts

onKey(event) {
  if (event.key === "Enter") {
    console.log(event);
  }

}

Answer 3

nextElementSibling, Keyup , -

keyup (keyup)="keytab($event)"

keytab(event){
    let element = event.srcElement.nextElementSibling; // get the sibling element

    if(element == null)  // check if its null
        return;
    else
        element.focus();   // focus if not null
}

,

tabindex.directive.ts:

import { Directive, HostListener, Input } from '@angular/core';
import { TextInput } from 'ionic-angular';

@Directive({
    selector: '[yourTabindex]'
})
export class TabindexDirective {

    constructor(private inputRef: TextInput) { }

    @HostListener('keydown', ['$event']) onInputChange(e) {
        var code = e.keyCode || e.which;

        if (code === 13) {
            e.preventDefault();
            this.inputRef.focusNext();
        }
    }
}

"", :

<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" yourTabindex   ></ion-input>

Answer 4

scrollAssist: true autoFocusAssist: true app.module @ngModule .

imports: [
    IonicModule.forRoot(MyApp, {
        scrollAssist: true,
        autoFocusAssist: true
    })
],