"गो"/"एंटर" कीबोर्ड बटन Ionic2 <ion-input>

Question

इनपुट पर "एंटर" या "जाने" कुंजीपटल कुंजी को संभालने की घटना क्या है? इनपुट का उपयोग किसी रूप में नहीं किया जाता है। तो उस पर क्लिक करने से "सबमिट" नहीं होगा। मुझे बस घटना की ज़रूरत है।

करने के लिए कि Ionic2 रूपों का उपयोग करने के लिए हो सकता है सही तरीके से (रनिंग android + आयोनिक 2 बीटा 11 पर)

Answer 1

। अन्यथा https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/

- आप "बस चाहता हूँ" अगर "ईवेंट हैंडलर" Enter यह काफी जटिल है और न बॉक्स से बाहर के रूप में आप सोच हो सकती है: I'v इस पाया:

HTML: (!)

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

टीएस:

... 
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 = ""; 
    } 
} 

जे एस:

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

Answer 2

मेरे मामले में, मुझे अगले बटन एंड्रॉइड और आईओएस दोनों के लिए एक फॉर्म के भीतर नहीं मिल रहा है। मैं केवल कर रहा हूँ। इसलिए मैंने निम्नलिखित निर्देशों का उपयोग करके अगले के रूप में संभाला।

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> 

आशा है कि यह किसी की मदद करे !!

संपादित करें: मुझे बताएं कि क्या आपको पहले इनपुट बॉक्स के लिए अगला बटन दिखाने के लिए सक्षम किया गया है?

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

और::

Answer 3

मैं इस तरह किया

handleLogin() { 
    // Do your stuff here 
}