web-dev-qa-db-ja.com

「Go」/「Enter」キーボードボタンIonic2 <ion-input>の処理方法

入力で「Enter」または「Go」キーボードキーを処理するイベントは何ですか？入力はフォーム内では使用されません。したがって、それをクリックしても「送信」されません。イベントが必要です。

（実行中Android + Ionic 2）

javascriptangularcordovaionic2key-events
16
rubmz

私はこれが好きでした：

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

そして：

handleLogin() {
    // Do your stuff here
}
52
sordaria

私の場合、AndroidとIOSの両方について、フォーム内にnext）ボタンが表示されません。だから私はdoneをnextとして処理しました指令。

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>

これが誰かを助けることを願っています!!

編集：最初の入力ボックスに次のボタンを表示できるかどうか教えてください。

3
Sandeep Sharma

これを行う正しい方法は、Ionic2フォームを使用することです。私はこれを見つけました： https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/

それ以外の場合-「Enter」イベントハンドラが必要な場合、これは非常に複雑（！）であり、すぐに使用できるようになっています。

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