Come gestire il button "Go" / "Enter" del tastierino Ionic2 <ingresso ionico>

Qual è l'evento per gestire il tasto "enter" o "go" della tastiera su un input? L'input non viene utilizzato all'interno di un module. Così facendo clic su di esso non verrà "inviato". Ho solo bisogno dell'evento.

(Running android + Ionic 2 su Beta 11)

Il modo giusto per farlo potrebbe essere quello di utilizzare le forms Ionic2. Ho trovato questo: https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/

Altrimenti – se volete solo il gestore di events "Enter" questo è abbastanza complesso (!) E non fuori dalla scatola come si potrebbe pensare:

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

Per il mio caso, non ho il button successivo all'interno di una forma per Android e IOS. Sto solo facendo. così ho gestito come un successivo utilizzando la seguente direttiva.

 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; 

Come usare?

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

Spero che questo aiuti qualcuno !!

Modifica: fai sapere se hai abled per mostrare il button successivo per la prima casella di input?

Mi è piaciuto:

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

E:

 handleLogin() { // Do your stuff here }