Angular使用keydown监听tab键事件处理

时间:2022-06-01 18:48:46

在html中,在焦点元素上按下tab键,它会跳到下一个可聚焦元素(按钮、输入等)。如果监听的是keyup,当按下tab放开时,焦点元素已经变为下一个可聚焦元素。在前面的焦点元素上做监听keyup是不会触发事件的处理handler的。

为了避免焦点元素的变化这个问题,可以使用keydown监听tab键

Angular监听tab键示例

示例:

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

上面示例中可以正常调用tab键事件处理onKey函数。

禁止Tab默认的切换焦点元素行为

默认情况下tab键会跳到下一个可聚焦的元素,如果要禁止此默认行为,在监听处理上返回false。

代码如下:

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