1
votes

Entrez la clé pour passer à l'élément suivant sous la forme Ionic 4 Angular 8

Dans mon PWA construit avec Ionic et Angular 8, je dois gérer la pression de la touche Entrée pour passer à l'élément suivant. Comment puis-je y parvenir avec (keyup.enter). S'il vous plaît, aidez-moi.

https://stackblitz.com/edit/ionic-3drfby

angular ionic4 angular8 ionic3 keyup

1 commentaires

Veuillez ajouter le code correspondant sous forme de blocs de code. Cette question deviendrait totalement inutile si (quand) le lien meurt. Un Stackblitz est génial !! :) mais questioin lui-même doit fournir un exemple reproductible minimal

3 Réponses :

4
votes

une façon est de définir une référence de l'élément suivant. comme ci-dessous

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
todo = {}
  logForm() {
    console.log(this.todo)
  }

  setFocus(nextElement) {
     nextElement.setFocus(); //For Ionic 4
    //nextElement.focus(); //older version
  }

  constructor(public navCtrl: NavController) {

  }

}

et dans le fichier .ts

<ion-content padding>
 <form (ngSubmit)="logForm()">
      <ion-item>
        <ion-label>Todo1</ion-label>
        <ion-input type="text" [(ngModel)]="todo.title1" name="title1" #a (keyup.enter)="setFocus(b)"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Todo2</ion-label>
        <ion-input type="text" [(ngModel)]="todo.title2" name="title2" #b (keyup.enter)="setFocus(c)"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Todo3</ion-label>
        <ion-input type="text" [(ngModel)]="todo.title3" name="title3" #c (keyup.enter)="setFocus(d)"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Description</ion-label>
        <ion-textarea [(ngModel)]="todo.description" name="description" #d></ion-textarea>
      </ion-item>
      <button ion-button type="submit" block>Add Todo</button>
    </form>
</ion-content>

0 commentaires

4
votes

J'écrirais une directive personnalisée pour cela. Inspiré par cette réponse . La directive pourrait être placée sur le formulaire, nous utilisons HostListener pour écouter keyup.enter et si un élément suivant existe, nous y déplaçons le focus.

Nous devrait apporter des modifications à la manière dont votre formulaire est soumis, car ngSubmit sera appelé à chaque fois que vous appuyez sur Entrée. Je supprimerais donc cela de la balise form, définirais le bouton sur type = "button" et y attacherais plutôt un événement de clic pour appeler logForm () .

Dans l'ensemble, voici ce que je fais:

@Directive({
  selector: "[focusDir]"
})
export class FocusDirective {
  constructor() {}

  @HostListener("keyup.enter") onKeyupEnter() {
    var nextEl = this.findNextTabStop(document.activeElement);
    nextEl.focus();
    // or try for ionic 4:
    // nextEl.setFocus();
  }

  findNextTabStop(el) {
    var universe = document.querySelectorAll(
      "input, button, select, textarea, a[href]"
    );
    var list = Array.prototype.filter.call(universe, function(item) {
      return item.tabIndex >= "0";
    });
    var index = list.indexOf(el);
    return list[index + 1] || list[0];
  }
}

La directive:

<form focusDir>
<!-- .... -->
<button ion-button type="button" block (click)="logForm()">Add Todo</button>

Puis marquez cette directive dans le tableau declarations de votre ngModule.

STACKBLIZ

0 commentaires

0
votes

Dans ionic 3, utilisez le code ci-dessous sur l'événement (keyup.enter)

<ion-input #myInput1 (keyup.enter)="myInput1.focusNext()"></ion-input>
<ion-input #myInput2 (keyup.enter)="myInput2.focusNext()"></ion-input>

Aussi simple que cela!

0 commentaires