如何获取 *focus* HostListener 的 keyCode

Posted 2023-02-22

【中文标题】如何获取 *focus* HostListener 的 keyCode

【英文标题】：How to get a keyCode for *focus* HostListener

【发布时间】：2018-05-14 06:23:37

【问题描述】：

我有一个指令，它为 html DOM 中的活动元素设置焦点样式。 目前，它工作正常，但我只需要在按下选项卡按钮时执行此逻辑。

@HostListener('focus', ["$event"])
    onFocus(event: KeyboardEvent) 
        console.log("Focus called from HostListener");
    

我在 event 对象中没有看到 keyCode 属性。

我怎样才能得到这个事件的keyCode？​​p>

【参考方案1】：

HTML：

<input (keydown.Tab)="onKey($event)">

TS：

onKey(event:any)
 //Do logic

【讨论】：

没关系，但我需要@HostListener('focus', ["$event"]) 上的检测keyCode。如果可能的话。

我不知道你想如何实现这一点，这个事件是当你聚焦时，而不是当你按下键时，它们是 2 个不同的事件，不能在同一个事件检测中组合。我将使用 keytab 检测来编辑我的答案。

【参考方案2】：

简单的把它放在你的html中：

<input (focus)="isFocused($event)" />

或者当散焦时：

<input (blur)="onBlur($event)" />

如果要检测标签：

<input (input)="onInput($event)" />

当然，您可以将两者结合起来。但是，如果您进入输入，(focus) 将触发。

【讨论】：

简单而精彩