Javascript 如何处理；围棋/&引用；输入“；键盘按钮Ionic2<；离子输入>；

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

---

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

正确的方法可能是使用Ionic 2表单。我发现了这个：

否则-如果您“只是想要”输入“事件处理程序”，这是非常复杂的（！），而不是像您可能想的那样开箱即用：

HTML:

---

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

import{Directive，HostListener，Output，EventEmitter，ElementRef，Input}来自“@angular/core”；
从'@ionic native/Keyboard'导入{Keyboard}；
@指示({
选择器：'[br数据依赖关系]'//属性选择器
})
导出类BrDataDependency{
@Output（）输入：EventEmitter=neweventemitter（）；
@Input（'br-data-dependency'）nextIonInputId:any=null；
构造函数（公共键盘：键盘、，
公共元素参考：元素参考）{
}
@HostListener（'keydown'，['$event']））
关键事件（事件）{
if（event.srcelelement.tagName！=“输入”）{
返回；
}
var code=event.keyCode | | event.which；
如果（代码===制表符\键\代码）{
event.preventDefault（）；
this.onNext（）；
让PreviousElementValue=this.elementRef.nativeElement.children[0].value；
this.input.emit（PreviousElementValue）
}否则如果（代码===输入\u键\u代码）{
event.preventDefault（）；
这个；
让PreviousElementValue=this.elementRef.nativeElement.children[0].value；
this.input.emit（PreviousElementValue）
}
}
onEnter（）{
log（“onEnter（）”）；
如果（！this.nextIonInputId）{
返回；
}
让nextInputElement=document.getElementById（this.nextIonInputId）；
//输入时，转到下一个输入字段
if（nextInputElement&&nextInputElement.children[0]）{
let元素：any=nextInputElement.children[0]；
如果（element.tagName==“输入”）{
元素focus（）；
}
}
}
onNext（）{
log（“onNext（）”）；
如果（！this.nextIonInputId）{
返回；
}
让nextInputElement=document.getElementById（this.nextIonInputId）；
//输入时，转到下一个输入字段
if（nextInputElement&&nextInputElement.children[0]）{
let元素：any=nextInputElement.children[0]；
如果（element.tagName==“输入”）{
元素focus（）；
}
}
}
}
const TAB_KEY_CODE=9；
常量输入键代码=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>

---

你必须使用表单

type=“submit”

它对我很有效，看起来有点含蓄，但确实节省了我的时间。我同意表单是“正确”的方式。但是，如果您只想在“enter”上调用一个方法。。。然后使用

keyup键。输入
call。在另一个回答中也提到了。android软键盘的下一个按钮上也可能出现这种情况吗？如果按钮显示为“Go”，这对我来说是有效的，但当它显示为“next”时，不会触发任何事件。好主意！似乎您真的不需要从'@ionic native/Keyboard'导入{Keyboard}-它不在任何地方使用。角度
@HostListener（'keydown'，['$event']）
就是所需要的。
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>

handleLogin() {
    // Do your stuff here
}