Jak obsługiwać przycisk klawiatury "Go"/"Enter" Ionic2 <ion-input>

Question

Jakie jest zdarzenie obsługi klawisza "enter" lub "go" na wejściu? Dane wejściowe nie są używane w formularzu. Kliknięcie go nie spowoduje "przesłania". Potrzebuję tego wydarzenia.

(z systemem Android + Ionic 2 na Beta 11)

Answer 1

właściwa droga do zrobienia, że ​​może być użycie formy Ionic2. I'v znaleźć to: https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/

Inaczej - Jeśli „po prostu«Enter»obsługi zdarzeń” To jest dość skomplikowane i nie po wyjęciu z pudełka, jak można pomyśleć:

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 2

W moim przypadku nie dostaję przycisku obok w formularzu zarówno na Androida, jak i na IOS. Jestem tylko gotowy. Tak więc obsłużyłem done jako następnej za pomocą poniższej dyrektywy.

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; 

Jak korzystać?

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

Mam nadzieję, że komuś pomogę !!

Edytuj: Daj znać, jeśli chcesz pokazać następny przycisk pierwszego pola wprowadzania danych?

Answer 3

zrobiłem tak:

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

oraz:

handleLogin() { 
    // Do your stuff here 
}