Html 如何防止在Angular中发生tab事件？

我想使用tab键执行一些逻辑，但实际上不改变焦点。根据，我可以在标记中使用false，也可以在方法中使用preventDefault（）。我两个都喜欢这个

onKey(event: KeyboardEvent) { 
  event.preventDefault();
  if(event.key = "Tab") { this.update.emit(this.config); }
}

<input #input
   title="{{config|json}}"
   value="{{config.value}}"
   (keyup)="onKey($event)"
   (keydown.Tab)="onKey($event);false;">

onKey（事件：KeyboardEvent）{
event.preventDefault（）；
if（event.key=“Tab”）{this.update.emit（this.config）；}
}

不过，当我按tab键时，它会有额外的跳跃。当我尝试相同的逻辑，但基于其他键（例如“a”或“enter”）时，行为与预期一致，因此我得出结论，逻辑是正确的。由于某些原因，“按制表符”是难以控制的，它会传播事件，就好像我要按两次制表符一样

我是否错误地处理tab键？除了我已经拥有的东西，我不确定要用谷歌搜索什么。

尝试使用以下代码：

从'@angular/core'导入{HostListener}；
@HostListener（'文档：keydown.tab'，['$event']））
onKeydownHandler（事件：KeyboardEvent）{
event.preventDefault（）；
}

从stackblitz中摘录：

ts

html

- - - 

这并不能真正回答您的问题，但我会小心更改选项卡功能，因为它可能会使一些辅助功能变得古怪，并导致残疾人出现意外行为。@Pyth同意。此特定案例适用于数量有限且与世隔绝的用户，他们认为Excel是有史以来最好的工具，因此要求能够使用tab键切换到下一个单元格。：）我看不出你描述的行为。我已删除所有未定义的项目：@jcuypers我确认。不过，仍然存在一个问题。当我添加第二个输入框并尝试以编程方式关注它时，我可以设置它的值，但焦点保持在初始框中。请查看。@KonradViltersten:但它可以工作：。您使用了

setFocus（）

而不是

focus（）

。

import { Component, ViewChild, ElementRef,ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private changeDetector: ChangeDetectorRef) { }


  @ViewChild("input2") input2: ElementRef;

  onKey(event: KeyboardEvent) {
    event.preventDefault();
    if (event.key === "Tab") {
        console.log('ole... tab');
        this.input2.nativeElement.value = "aha";
        this.changeDetector.detectChanges();
        this.input2.nativeElement.focus();
    }

  }

}

<input #input
   title=""
   value=""
   (keydown.Tab)="onKey($event);false;">
 - - - 
   <input #input2
   title=""
   value=""
   (keydown.Tab)="onKey($event);false;">