如何处理“Go”/“Enter”键盘按钮 Ionic2 <ion-input>

Posted 2023-02-22

【中文标题】如何处理“Go”/“Enter”键盘按钮 Ionic2 <ion-input>

【英文标题】：How to handle "Go"/"Enter" keyboard button Ionic2 <ion-input>

【发布时间】：2017-04-05 10:57:21

【问题描述】：

处理输入上的“enter”或“go”键盘键的事件是什么？ 输入不在表单中使用。所以点击它不会“提交”。我只需要这个活动。

（在 Beta 11 上运行 android + Ionic 2）

【问题讨论】：

你必须使用表单type="submit" 它对我有用

【参考方案1】：

我是这样做的：

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

还有：

handleLogin() 
    // Do your stuff here

【讨论】：

安卓软键盘的next按钮也可以吗？

如果按钮显示“Go”，但当它显示“Next”时，不会触发任何事件。

【参考方案2】：

就我而言，我没有在 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>

希望这对某人有所帮助！

编辑：让我知道您是否能够为第一个输入框显示下一个按钮？

【讨论】：

好主意桑迪普！看来你真的不需要import Keyboard from '@ionic-native/keyboard'; - 它没有在任何地方使用。 Angular @HostListener('keydown', ['$event']) 就是我们所需要的。

【参考方案3】：

正确的方法可能是使用 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();
    

【讨论】：

非常感谢，看起来有点含蓄，但确实节省了我的时间。

同意表格是“正确”的方式。但是，如果您只想在“enter”上调用一个方法……那么请使用keyup.enter 调用。在另一个答案中也提到过。