Question

我正在与input s一起工作，但是我不确定如何完成导航的配置（我想这是预定义的行为）。

我不在最后一个input内，Enter键转到下一个。这是我想要的。

尽管如此，当我在最后一个input上时，按Enter键时，它将自动单击下一个button。

这就是我要避免的事情。有什么办法可以改变这种行为？只是要关闭键盘或单击另一个button？

我尝试使用keyup.enter，它是伪作品。它调用该方法，但也单击下一个button

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"
        />

此方法应该可以在手机上使用，所以我猜不能选择keydown，因为$event.code在手机上没有给我任何代码。

Answer 1

前段时间，我制定了一条指令see stackblitz，该指令可以通过以下方式在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>

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

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

Answer 2

这是一种非常简单的方法，只需几行代码：

首先，在Template动态创建Input元素时：1.用唯一数字填充tabIndex属性，2.填充超简单的自定义“标记”具有与tabIndex相同的唯一编号的指令，并且3.设置Keydown“ Enter”事件监听器：

Template:

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

在您的component中，您的超级简单事件监听器onEnter()：

@ViewChildren(TagDirective) ipt!: QueryList<ElementRef>;

  onEnter(e: Event) {
    this.ipt["_results"][(<HTMLInputElement>e.target).tabIndex%(+this.ipt["_results"].length-1)+1].el.nativeElement.focus();
  }

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

超级简单，最低限度的“标记” Directive

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

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

  constructor(public el: ElementRef) { }

}

甚至可能有一种方法可以完全摆脱“ Tag”指令，并使之更加简单，但是我还没有时间弄清楚该怎么做。。。

更改手机中Enter键的行为-Angular 5

2 个答案: