How to handle the "Go" / "Enter" key Ionic2 <ion input>

Question

What event is handled by the enter or go key on the input? Login is not used on the form. Therefore, clicking on it will not “obey”. I just need an event.

(Launch android + Ionic 2 in beta 11)

Answer 1

I like it:

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

and

 handleLogin() { // Do your stuff here } 

Answer 2

The right way to do this may be to use Ionic2 forms. I found this: https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/

Otherwise - if you just want the "Enter" "event handler, it’s quite difficult (!), And not out of the box, as you might think:

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

Answer 3

In my case, I do not get the next button on the form for Android and IOS. I only do. so I processed it as the next one using the following directive.

 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; 

How to use?

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

Hope this helps someone!

Edit: let me know if you seek to show the next button for the first input window?