web-dev-qa-db-fra.com

Comment gérer le bouton du clavier «Go» / «Enter» Ionic2 <ion-input>

Quel est l'événement pour gérer la touche du clavier "Entrée" ou "Aller" sur une entrée? L'entrée n'est pas utilisée dans un formulaire. Donc, cliquer dessus ne "soumettra" pas. J'ai juste besoin de l'événement.

(En cours d'exécution Android + Ionic 2 sur la version bêta 11)

javascriptangularcordovaionic2key-events
16
rubmz

J'ai aimé ça:

<ion-input type="text" [(ngModel)]="username" (keyup.enter)="handleLogin()"></ion-input>

Et:

handleLogin() {
    // Do your stuff here
}
52
sordaria

Pour mon cas, je ne reçois pas suivant bouton dans un formulaire pour les deux Android et IOS. Je ne fais que terminer. J'ai donc géré done comme suivant en utilisant la directive suivante.

import { Directive, HostListener, Output, EventEmitter, ElementRef, Input } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';

@Directive({
  selector: '[br-data-dependency]' // Attribute selector
})
export class BrDataDependency {
  @Output() input: EventEmitter<string> = new EventEmitter<string>();
  @Input('br-data-dependency') nextIonInputId: any = null;

  constructor(public Keyboard: Keyboard,
    public elementRef: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  keyEvent(event) {
    if (event.srcElement.tagName !== "INPUT") {
      return;
    }

    var code = event.keyCode || event.which;
    if (code === TAB_KEY_CODE) {
      event.preventDefault();
      this.onNext();
      let previousIonElementValue = this.elementRef.nativeElement.children[0].value;
      this.input.emit(previousIonElementValue)
    } else if (code === ENTER_KEY_CODE) {
      event.preventDefault();
      this.onEnter();
      let previousIonElementValue = this.elementRef.nativeElement.children[0].value;
      this.input.emit(previousIonElementValue)
    }
  }

  onEnter() {
    console.log("onEnter()");
    if (!this.nextIonInputId) {
      return;
    }

    let nextInputElement = document.getElementById(this.nextIonInputId);

    // On enter, go to next input field
    if (nextInputElement && nextInputElement.children[0]) {
      let element: any = nextInputElement.children[0];
      if (element.tagName === "INPUT") {
        element.focus();
      }
    }
  }

  onNext() {
    console.log("onNext()");
    if (!this.nextIonInputId) {
      return;
    }

    let nextInputElement = document.getElementById(this.nextIonInputId);

    // On enter, go to next input field
    if (nextInputElement && nextInputElement.children[0]) {
      let element: any = nextInputElement.children[0];
      if (element.tagName === "INPUT") {
        element.focus();
      }
    }
  }
}

const TAB_KEY_CODE = 9;
const ENTER_KEY_CODE = 13;

Comment utiliser?

 <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
      <ion-input br-data-dependency="password" type="text" formControlName="username" placeholder="USERNAME" (input)="userNameChanged($event)"></ion-input>
      <ion-input id="password" password type="password" formControlName="password" placeholder="PASSWORD"></ion-input>
      <button submit-button ion-button type="submit" block>Submit</button>

</form>

J'espère que cela aide quelqu'un !!

Edit: faites-moi savoir si vous êtes capable d'afficher le bouton suivant pour la première zone de saisie?

3
Sandeep Sharma

La bonne façon de le faire pourrait être d'utiliser des formes Ionic2. Je l'ai trouvé: https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/

Sinon - Si vous "voulez juste le gestionnaire d'événement" Enter "" c'est assez complexe (!) Et pas hors de la boîte comme vous pourriez le penser:

HTML:

<ion-input id="myInput" #myInput type="submit" [(model)]="textValue" (input)="setText( $event.target.value )" placeholder="Send Message ..." autocorrect="off"></ion-input>

TS:

...
declare let DeviceUtil: any;
...
export class Component_OR_PAGE
{
    public textValue: string;
    @ViewChild( 'myInput') inputElm : ElementRef;
    @HostListener( 'keydown', ['$event'] )
        keyEvent( e )
        {
            var code = e.keyCode || e.which;
            log.d( "HostListener.keyEvent() - code=" + code );
            if( code === 13 )
            {
                log.d( "e.srcElement.tagName=" + e.srcElement.tagName );
                if( e.srcElement.tagName === "INPUT" )
                {
                    log.d( "HostListener.keyEvent() - here" );
                    e.preventDefault();
                    this.onEnter();
                    DeviceUtil.closeKeyboard();
                }
            }
        };

    ...

    setText( text )
    {
        log.d( "setText() - text=" + text );
        this.textValue = text;
    }

    onEnter()
    {
        console.log( "onEnter()" );
        this.inputText.emit( this.textValue );
        this.textValue = "";
        // ionic2 beta11 has issue with data binding
        let myInput = document.getElementById( 'myInput' );
        let innerInput: HTMLInputElement = <HTMLInputElement>myInput.children[0];
        innerInput.value = "";
    }
}

JS:

DeviceUtil =
{
    closeKeyboard: function()
    {
        cordova.plugins.Keyboard.close();
    }
}
2
rubmz