离子输入字段不会自动移动到下一个字段答案

【问题标题】：Ionic input field does not move to next field automatically离子输入字段不会自动移动到下一个字段
【发布时间】：2018-02-05 10:47:49
【问题描述】：

我将 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>

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

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

我在这里所做的是设置下一个元素的引用（例如：#b），并且在 keyup 事件中，我将该引用传递给 .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();
          }

        }

【讨论】：

先生这对我不起作用，我有这个错误TypeError: _co.moveFocus is not a function
抱歉我的错误我将.ts 文件中的函数命名错误。只需将.ts 文件中的函数名称从moveToNext() 更改为moveFocus()。
对于 Ionic 4，使用 nextElemnt.setFocus()
如何从输入字段中获取值，因为 ngModel 不适用于这些？
keyup.enter 用于事件，否则它会一直在下一个

【解决方案2】：

您可以尝试使用 (keyup) 或 (keydown) 事件。 Angular 文档中也有关于表单和用户输入的文档。

HTML

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

.ts

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

}

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

在@ngModule 中的app.module 中添加“scrollAssist: true”和“autoFocusAssist: true”可以解决这个问题。

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

【讨论】：