ionic-framework - ionic 输入字段不会自动移至下一个字段

Question

我将ionic 3用于移动应用程序时，我的输入字段出现了一些问题，这些问题不会自动移至下一个字段。例如，当我单击第一个输入字段并填充第一个输入时，光标不会移动到下一个字段。如何正确地做到这一点？

 <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

您可以使用以下方法，可能会有更好的方法，我只是分享我所知道的。

我在这里所做的是设置下一个元素的引用(例如#b)，并且在键入事件时，我将该引用传递给.ts文件中的函数，该文件仅在引用的元素上调用.setFocus()。

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

        }