如何用activeElement判断指定类名的元素是否获得焦点？

需要判断拥有指定类名的元素是否获得焦点，尝试使用document.activeElement时遇到问题：

• 主动调用focus()时判断有效，但点击输入框触发onclick事件时，判断结果始终为false。
• 尝试过直接对比类名集合（getElementsByClassName返回的对象）和activeElement，也试过提前定义类名检查变量，均未解决问题。

问题原因 #

1. 类名集合对比错误：getElementsByClassName返回的是HTMLCollection类数组对象，不是单个DOM元素，直接和document.activeElement（单个元素）对比必然不相等。
2. 事件时机错误：onclick事件触发时，元素还未完全获得焦点，此时document.activeElement可能还是之前的元素。
3. 变量定义时机错误：isFocused1和isFocused2是页面加载时就计算的固定值，不是事件触发时的实时状态。

解决方案 #

核心思路 #

• 在元素获得/失去焦点的事件回调中，实时获取document.activeElement并检查其类名
• 使用classList.contains()或Element.matches()方法判断元素是否包含目标类名

修正后的代码示例 #

HTML部分

<table>
    <tr>
        <td><input type="text" name="" class="prev"></td>
        <td><input type="text" name="" class="curr"></td>
        <td><p class="Mtr-result"></p></td>
    </tr>
    <tr>
        <td><input type="text" name="" class="prev"></td>
        <td><input type="text" name="" class="curr"></td>
        <td><p class="Mtr-result"></p></td>
    </tr>
</table>
<div id="test"></div>

JavaScript部分

// 获取所有目标元素
const prevInputs = document.getElementsByClassName('prev');
const currInputs = document.getElementsByClassName('curr');
const testDiv = document.getElementById('test');

// 定义焦点检查函数
function checkFocusStatus() {
    const activeEl = document.activeElement;
    const isPrevFocused = activeEl.classList.contains('prev');
    const isCurrFocused = activeEl.classList.contains('curr');
    testDiv.innerHTML += `${isPrevFocused} ${isCurrFocused} `;
}

// 给所有prev和curr元素绑定focus事件
[...prevInputs, ...currInputs].forEach(input => {
    input.addEventListener('focus', checkFocusStatus);
});

额外优化 #

如果需要监听所有元素的焦点变化，也可以给document绑定focus事件（需添加useCapture: true参数）：

document.addEventListener('focus', function(e) {
    const activeEl = e.target;
    const isPrevFocused = activeEl.classList.contains('prev');
    const isCurrFocused = activeEl.classList.contains('curr');
    testDiv.innerHTML += `${isPrevFocused} ${isCurrFocused} `;
}, true);

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