如何處理「開始」 /「Enter」鍵鍵盤按鍵Ionic2 <ion-input>

Question

什麼是處理「進入」或「走出去」上的輸入鍵盤按鍵的事件？ 輸入不在表單中使用。所以點擊它不會「提交」。我只需要這個事件。

Answer 1

（貝塔11運行Android +離子2）要做到這一點可能是使用Ionic2形式的正確方式。我心中已經發現這一點：https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/

否則 - 如果「只想‘回車’事件處理程序」，這是相當複雜的，而不是現成的，你可能會想：

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

對於我而言，我不是爲Android和iOS在表單中得到下一個按鈕。我只做完了。所以我處理通過以下指令完成爲下一個。

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; 

如何使用？

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

希望這可以幫助別人！

編輯：讓我知道如果你是體健，顯示下一個按鈕的第一輸入框？

Answer 3

我不喜歡這樣的：

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

和：

handleLogin() { 
    // Do your stuff here 
}