Question

我在我的移动应用程序中使用离子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），并且在keyup事件上我将该引用传递给.ts文件中的函数，该函数只调用{ {1}}在引用的元素上。

.setFocus()

.TS：

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

Answer 2

您可以尝试使用（keyup）或（keydown）事件。还有关于角度文档的文档，这些文档讨论了表单和用户输入。

<强> HTML

System.out.println(args[i].length()-1);//its last symbol

<强> .TS

<input (keyup)="onKey($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

在@ngModule中的app.module中添加“ scrollAssist：true”和“ autoFocusAssist：true”将解决此问题。

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

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

4 个答案: