在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">