Enter键的行为类似于Angular中的Tab

时间:2019-04-09 14:46:48

标签: angular enter tabindex

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

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

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

2 个答案:

答案 0 :(得分: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提供一个表单,因为每个表单都需要一个特定的实例。

答案 1 :(得分:0)

这是一种非常简单的方法,仅包含几行代码(我也在此处发布了这些代码: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”指令,并使之更加简单,但是我还没有时间弄清楚该怎么做。 。 。