Angular 自定义指令在按下回车键时设置选项卡索引

Question

我想在整个表单中触发 keydown.Enter 上的 Tab 键事件。为此，使用以下代码，我运行父 Div 上的函数。在控制台中检测到该事件，但输入没有发生任何变化（我的意思是焦点不会随着 Tab 键移动而从输入上移开）。

模板： <Div #parentnode (keydown)="KeyEventEmitter($event, parentnode)>

TS 文件：

KeyEventEmitter(event:KeyboardEvent, el) {
//event.preventDefault;
let keyEvent = new KeyboardEvent("keyDown", 
{key : "Tab", 
bubbles: true, 
code: "Tab", 
location: 0, 
composed: true,
cancelable: true,
ctrlKey: false,
altKey: false,
detail: 0,
shiftKey: false
});
console.log('I am custom keyevent', keyEvent)
el.dispatchEvent(keyEvent);
}

}

将不胜感激任何帮助。谢谢

Answer 1

您可以创建一个 tabIndex 指令，并在该指令内设置下一个索引元素的焦点，按下回车键。

tab.directive.ts

import { Directive, Input, ElementRef, HostListener, OnInit } from'@angular/core';
import { TabService } from './tab.service';
import { BehaviorSubject } from 'rxjs';

@Directive({
 selector: '[tabIndex]'
})
export class TabDirective implements OnInit {
 private _index: number;

 get index() {
   return this._index;
 }
 @Input('tabIndex')
 set index(i: any) {
   this._index = parseInt(i);
 }

@HostListener('keydown', ['$event'])
onInput(e: any) {
 if (e.which === 13) {
  e.preventDefault();
  console.log('index', this.index+1)
  this.tabService.selectedInput.next(this.index + 1);
 }
}
constructor(private el: ElementRef, private tabService: TabService) {}

ngOnInit(){
  this.tabService.selectedInput.subscribe((i) => {
    if (i === this.index) {
      this.el.nativeElement.focus()
     }
   });
  }
}

创建一个选项卡服务，在每次按下按键时使用 BehaviourSubject 触发下一个索引。

tab.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({providedIn: 'root'})
export class TabService {
 selectedInput: BehaviorSubject<number> = new BehaviorSubject<number>(1);
}

现在在模板中按顺序将 tabIndex 分配给每个元素。

<input type="text" tabIndex="1">
<input type="text" tabIndex="2">
<input type="text" tabIndex="3">
<a href="https://google.com" tabIndex="4">Google</a>

您可以在 stackblitz

上找到完整的工作示例 DEMO

Angular 自定义指令在按下回车键时设置选项卡索引

Angular Custom Directive Set Tab Index On Enter Key Press

angular-directive

angular