Angular：监听tab按键切换元素时如何获取焦点元素的ID或class

实现方案 #

你可以直接通过浏览器原生的document.activeElement属性获取当前页面的焦点元素，再读取它的id、className属性即可，修改后的代码如下：

@HostListener('document:keyup.tab')
onKeyupTab(){
  console.log('tab key pressed');
  // 获取当前焦点元素
  const activeEle = document.activeElement;
  if(activeEle) {
    // 获取元素ID，无ID则返回空字符串
    const eleId = activeEle.id;
    // 获取元素class字符串，无class则返回空字符串
    const eleClass = activeEle.className;
    console.log('当前焦点元素ID：', eleId);
    console.log('当前焦点元素class：', eleClass);
    // 后续校验逻辑可以直接使用eleId、eleClass变量
  }
}

如果需要获取单个class属性值或者遍历class列表，可以调用activeEle.classList的相关API操作

注意事项 #

• 如果页面存在iframe嵌套，需要先获取对应iframe的窗口对象再读取其内部的activeElement，普通单页场景不需要额外处理
• 部分不可聚焦的元素（比如未加tabindex属性的普通div）不会被tab键选中，无明确焦点元素时activeElement默认会返回body元素

内容的提问来源于stack exchange，提问作者Mark Handy