web-dev-qa-db-fra.com

Le champ d'entrée ionique ne passe pas automatiquement au champ suivant

En utilisant ionic 3 pour mon application mobile, certains champs d’entrée ne me permettent pas de passer automatiquement au champ suivant. Par exemple, lorsque je clique sur la première entrée classée et que je remplis la première, le curseur ne se déplace pas vers le champ suivant. Comment faire ça correctement?

 <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-frameworkionic3
5
core114

Vous pouvez utiliser l'approche suivante, il pourrait y avoir de meilleures approches je partage juste ce que je sais.

Ce que je fais ici est de définir une référence de l'élément suivant (par exemple: #b), et lors de l'événement keyup, je passe cette référence à ma fonction dans le fichier .ts qui appelle uniquement le .setFocus() sur l'élément référencé.

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

}
3
Faizan Ullah

Ajouter "scrollAssist: true" et "autoFocusAssist: true" à app.module dans @ngModule résoudrait ce problème.

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

Ceci peut être réalisé en utilisant nextElementSibling, vous pouvez utiliser l'événement Keyup pour y parvenir, voici le pseudo-code

Ajoutez l'événement keyup aux champs d'événement comme suit (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
}

Afin de le rendre plus clair, vous pouvez créer une directive également comme suit

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

N'oubliez pas d'inclure cette directive dans la page Modules et vous pouvez l'utiliser sur vos champs d'entrée comme suit, à titre d'exemple:

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

Vous pouvez essayer quelque chose avec les événements (keyup) ou (keydown). Il existe également une documentation disponible sur les documents angulaires qui traite des formulaires et de la saisie utilisateur.

HTML

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

.ts 

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

}
0
Ivas