我有一个Angular 2+表单组,每个表单字段都有tabIndex。
如何在每次按Enter键(类似于按制表符)时将焦点更改为下一个表单字段?
JavaScript参考-Enter key press behaves like a Tab in Javascript
答案 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”指令,并使之更加简单,但是我还没有时间弄清楚该怎么做。 。 。