如何获取Tab选中元素ID及检测指定输入元素是否处于Tab选中状态

其实你说的“高亮选中”本质上就是元素获得了焦点（focus）——Tab键切换的就是焦点，浏览器的高亮样式只是焦点的视觉表现。这里有两种实用的方案来检测：

1. 直接对比当前活跃元素（最简便） #

浏览器原生提供了document.activeElement属性，它会返回当前页面中获得焦点的元素。你只需要把目标input和这个属性做对比就行：

// 先获取目标input元素
const targetInput = document.getElementById('your-input-id');
// 判断是否处于焦点状态
const isFocused = document.activeElement === targetInput;

// 测试输出
console.log(isFocused); // 焦点在目标input上时返回true，否则false

这个方法零依赖、一步到位，适合单次检测的场景。

2. 监听焦点事件，实时跟踪状态 #

如果需要持续监控焦点状态（比如实时更新UI、触发特定业务逻辑），可以给目标input绑定focus和blur事件，维护一个状态变量：

const targetInput = document.getElementById('your-input-id');
let isInputFocused = false;

// 焦点进入时标记为true
targetInput.addEventListener('focus', () => {
  isInputFocused = true;
});

// 焦点离开时标记为false
targetInput.addEventListener('blur', () => {
  isInputFocused = false;
});

// 后续需要判断时直接使用这个变量
console.log(isInputFocused);

额外注意点 #

• 如果你的input嵌套在iframe里，要使用对应iframe的contentDocument.activeElement来判断，而不是主文档的。
• 不可交互的元素（比如设置了disabled或hidden属性）无法获得焦点，activeElement也不会指向它们。

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