Question

我有一个Angular 2+表单组，每个表单字段都有tabIndex。

如何在每次按Enter键（类似于按制表符）时将焦点更改为下一个表单字段？

JavaScript参考-Enter key press behaves like a Tab in Javascript

Answer 1

我可以通过一个简单的指令和一个更简单的服务来做到这一点。

tab.directive.ts

import { Directive, Input, ElementRef, HostListener, OnInit } from '@angular/core';
import { TabService } from './tab.service';
type IKNOWISNUMBER = any;
type IKNOWISSTRING = any;

@Directive({
  selector: '[tabIndex]'
})
export class TabDirective implements OnInit {

  private _index: number;
  get index(): IKNOWISNUMBER{
    return this._index;
  }
  @Input('tabIndex')
  set index(i: IKNOWISSTRING){
    this._index = parseInt(i);
  }

  @HostListener('keydown', ['$event'])
  onInput(e: any) {
    if (e.which === 13) {
      this.tabService.selectedInput.next(this.index + 1)
      e.preventDefault();
    }
  }
  constructor(private el: ElementRef, private tabService: TabService) { 
  }

  ngOnInit(){
    this.tabService.selectedInput.subscribe((i) => {
      if (i === this.index){
        this.el.nativeElement.focus();
      }
    });
  }
}

tab.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable()
export class TabService {
  selectedInput: BehaviorSubject<number> = new BehaviorSubject<number>(1);
}

我创建了一个stackblitz来展示其工作原理。

P.S。请记住，为每个组件内部的tab.service提供一个表单，因为每个表单都需要一个特定的实例。

Answer 2

这是一种非常简单的方法，仅包含几行代码（我也在此处发布了这些代码：Change behavior of Enter key . . . ）：

首先，在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中的Tab

2 个答案: