Html 更改手机中回车键的行为-角度5

我正在使用

input

s，但我不确定导航的配置是如何完成的（我想这是预定义的行为）

我不在最后一个

输入中

回车键转到下一个。这一个是我想要的。

然而，当我处于最后一个

输入

时，当我按enter键时，它会自动单击下一个

按钮

。

这就是我试图避免的。有没有办法改变这种行为？只需关闭键盘或单击另一个

按钮

我试过使用

keyup。输入
，它就可以工作了。它调用该方法，但也单击下一个
按钮

HTML

<input
          type="text"
          class="form-control"
          id="validationCustomSurname"
          placeholder="e.g. Lopez"
          required
          (keyup.enter)="onNavigate(1, 'forward')"
          [(ngModel)]="values.store.surname"
          name="surname"
        />



这种方法应该适用于手机，所以我想
键控
不是一个选项，因为
$event.code
不会给我手机中的任何代码。
前一段时间，我发出了一个指令，要求你在div（或表单）中应用

<form [formGroup]="myForm" (submit)="submit(myForm)" enter-tab>
    Each input or button add a reference variable #nextTab like
    <input name="input1" formControlName="input1" #nextTab/>
    <button type="button" #nextTab/>
</form>


每个输入或按钮添加一个参考变量#nextTab like

该指令使用ContentChildren将keydown.enter添加到所有具有#nextTab的组件，以将焦点集中到下一个控件

export class EnterTabDirective {
  @ContentChildren("nextTab") controls: QueryList<any>
  nextTab

  constructor(private renderer: Renderer2, private el: ElementRef) {
  }
  ngAfterViewInit(): void {
    this.controls.changes.subscribe(controls => {
      this.createKeydownEnter(controls);
    })
    if (this.controls.length) {
      this.createKeydownEnter(this.controls);
    }
  }
  private createKeydownEnter(querycontrols) {
    querycontrols.forEach(c => {
      this.renderer.listen(c.nativeElement, 'keydown.enter', (event) => {
        if (this.controls.last != c) {
          let controls = querycontrols.toArray();
          let index = controls.findIndex(d => d == c);
          if (index >= 0) {
            let nextControl = controls.find((n, i) => n && !n.nativeElement.attributes.disabled && i > index)
            if (nextControl) {
              nextControl.nativeElement.focus();
              event.preventDefault();
            }
          }
        }
      })
    })
  }

导出类EnterTabDirective{
@ContentChildren（“nextTab”）控件：QueryList
下一步
构造函数（私有呈现器：Renderer2，私有el:ElementRef）{
}
ngAfterViewInit（）：void{
this.controls.changes.subscribe（controls=>{
此.createKeydownEnter（控件）；
})
if（this.controls.length）{
this.createKeydownEnter（this.controls）；
}
}
专用createKeydownEnter（QueryControl）{
querycontrols.forEach（c=>{
this.renderer.listen（c.nativeElement，'keydown.enter'，（事件）=>{
if（this.controls.last！=c）{
let controls=querycontrols.toArray（）；
设index=controls.findIndex（d=>d==c）；
如果（索引>=0）{
让nextControl=controls.find（（n，i）=>n&&！n.nativeElement.attributes.disabled&&i>index）
如果（nextControl）{
nextControl.nativeElement.focus（）；
event.preventDefault（）；
}
}
}
})
})
}
不久前，我发出一个指令，要求您以div（或表单）的形式

<form [formGroup]="myForm" (submit)="submit(myForm)" enter-tab>
    Each input or button add a reference variable #nextTab like
    <input name="input1" formControlName="input1" #nextTab/>
    <button type="button" #nextTab/>
</form>


每个输入或按钮添加一个参考变量#nextTab like

该指令使用ContentChildren将keydown.enter添加到所有具有#nextTab的组件，以将焦点集中到下一个控件

export class EnterTabDirective {
  @ContentChildren("nextTab") controls: QueryList<any>
  nextTab

  constructor(private renderer: Renderer2, private el: ElementRef) {
  }
  ngAfterViewInit(): void {
    this.controls.changes.subscribe(controls => {
      this.createKeydownEnter(controls);
    })
    if (this.controls.length) {
      this.createKeydownEnter(this.controls);
    }
  }
  private createKeydownEnter(querycontrols) {
    querycontrols.forEach(c => {
      this.renderer.listen(c.nativeElement, 'keydown.enter', (event) => {
        if (this.controls.last != c) {
          let controls = querycontrols.toArray();
          let index = controls.findIndex(d => d == c);
          if (index >= 0) {
            let nextControl = controls.find((n, i) => n && !n.nativeElement.attributes.disabled && i > index)
            if (nextControl) {
              nextControl.nativeElement.focus();
              event.preventDefault();
            }
          }
        }
      })
    })
  }

导出类EnterTabDirective{
@ContentChildren（“nextTab”）控件：QueryList
下一步
构造函数（私有呈现器：Renderer2，私有el:ElementRef）{
}
ngAfterViewInit（）：void{
this.controls.changes.subscribe（controls=>{
此.createKeydownEnter（控件）；
})
if（this.controls.length）{
this.createKeydownEnter（this.controls）；
}
}
专用createKeydownEnter（QueryControl）{
querycontrols.forEach（c=>{
this.renderer.listen（c.nativeElement，'keydown.enter'，（事件）=>{
if（this.controls.last！=c）{
let controls=querycontrols.toArray（）；
设index=controls.findIndex（d=>d==c）；
如果（索引>=0）{
让nextControl=controls.find（（n，i）=>n&&！n.nativeElement.attributes.disabled&&i>index）
如果（nextControl）{
nextControl.nativeElement.focus（）；
event.preventDefault（）；
}
}
}
})
})
}
这里有一个非常简单的方法，只需几行代码：

首先，在动态创建
输入
元素时，在
模板中
中：1.使用唯一编号填充
tabIndex
属性，2.使用与
tabIndex
相同的唯一编号填充超级简单的自定义“Tag”指令，以及3.设置按键“Enter”事件侦听器：

模板：

<ng-container *ngFor="let row in data">
   <input tabindex ="{{row[tabCol]}}" [appTag]="{{row[tabCol]}}" (keydown.enter)="onEnter($event)" . . . />
</ng-container>

注意：模数（%）操作只是为了确保如果您处于最后一个
输入
，您将循环回到第一个输入

超简单的最小“标记”
指令

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appTag]'
})
export class TagDirective {
  @Input('appTag') id: number;

  constructor(public el: ElementRef) { }

}

甚至可能有一种方法可以完全摆脱“Tag”`指令，使其更加简单，但我还没有时间去想如何做到这一点……
这里有一种非常简单的方法，只需几行代码：

首先，在动态创建
输入
元素时，在
模板中
中：1.使用唯一编号填充
tabIndex
属性，2.使用与
tabIndex
相同的唯一编号填充超级简单的自定义“Tag”指令，以及3.设置按键“Enter”事件侦听器：

模板：

<ng-container *ngFor="let row in data">
   <input tabindex ="{{row[tabCol]}}" [appTag]="{{row[tabCol]}}" (keydown.enter)="onEnter($event)" . . . />
</ng-container>

注意：模数（%）操作只是为了确保如果您处于最后一个
输入
，您将循环回到第一个输入

超简单的最小“标记”
指令

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appTag]'
})
export class TagDirective {
  @Input('appTag') id: number;

  constructor(public el: ElementRef) { }

}

甚至可能有一种方法可以完全摆脱“Tag”`指令，使它变得更简单，但我还没有时间去想怎么做…
检查这个答案检查这个答案