在web开发中，document.activeelement 是一个非常有用的dom属性，它返回当前文档中获得焦点的元素。无论元素是通过用户交互（如点击或tab键）获得焦点，还是通过javascript的 element.focus() 方法编程获得焦点，document.activeelement 都会准确指向该元素。
需要注意的是，document.activeElement 返回的是一个具体的DOM元素实例。如果文档中没有任何元素获得焦点，或者焦点在文档之外（例如在浏览器地址栏），那么 document.activeElement 通常会指向 document.body 或 null。
要判断一个具有特定类名的元素是否获得焦点，我们不能直接将 document.activeElement 与一个 HTMLCollection（例如 document.getElementsByClassName('your-class') 的结果）进行比较，因为 activeElement 是一个单一的元素，而 HTMLCollection 是一个元素集合。正确的做法是获取当前获得焦点的元素，然后检查它的 classList 是否包含目标类名。
以下是实现这一目标的核心方法：
// 假设我们要检查是否有元素带有 'my-class' 类名获得焦点
const isMyClassElementFocused = document.activeElement.classList.contains('my-class');
console.log(isMyClassElementFocused); // true 或 false这种方法简单直接，但它只能反映在执行代码时哪个元素获得焦点。为了实时响应焦点变化，我们需要结合事件监听器。
为了在元素获得或失去焦点时执行相应的逻辑，我们可以利用 focus 和 blur 事件。这些事件可以附加到单个元素上，也可以通过事件委托的方式附加到它们的父元素上。
以下是一个结合 focus 和 blur 事件来实时显示当前获得焦点的元素类名，并判断特定类名元素是否获得焦点的示例：
我们首先定义一些可获得焦点的输入框，它们带有不同的类名，以及用于显示结果的段落。
<input type="text" class="input-field test1"> <input type="text" class="input-field test2"> <input type="text" class="input-field test3"> <input type="text" class="input-field test4"> <p>.test3 是否获得焦点: <b id="is-test3-focused"></b></p> <p>当前获得焦点的元素类名: <b id="active-element-class"></b></p>
接着，我们编写JavaScript代码来监听所有输入框的 focus 和 blur 事件。在事件触发时，我们将更新显示区域的内容。
document.addEventListener('DOMContentLoaded', () => {
const targetClass = 'test3'; // 我们要检查的目标类名
const test3Element = document.querySelector(`.${targetClass}`); // 获取具体的 .test3 元素实例
const isTest3FocusedDisplay = document.getElementById('is-test3-focused');
const activeElementClassDisplay = document.getElementById('active-element-class');
// 遍历所有输入框并添加焦点/失焦事件监听器
document.querySelectorAll('.input-field').forEach(el => {
el.onfocus = updateFocusState;
el.onblur = updateFocusState;
});
// 初始设置，确保页面加载时显示正确状态
updateFocusState();
// 示例：程序化设置焦点，以观察效果
// test3Element.focus(); // 可以在页面加载后尝试取消注释这行，观察效果
function updateFocusState() {
const currentActiveElement = document.activeElement;
// 1. 判断具有特定类名的元素是否获得焦点
// 方法一：检查当前焦点元素的classList是否包含目标类
const isTargetClassFocused = currentActiveElement.classList && currentActiveElement.classList.contains(targetClass);
isTest3FocusedDisplay.textContent = isTargetClassFocused.toString();
// 方法二：检查当前焦点元素是否是特定的元素实例
// const isSpecificElementFocused = currentActiveElement === test3Element;
// isTest3FocusedDisplay.textContent = isSpecificElementFocused.toString();
// 2. 显示当前获得焦点的元素的所有类名
if (currentActiveElement && currentActiveElement !== document.body) {
activeElementClassDisplay.textContent = currentActiveElement.getAttribute('class') || '无类名';
} else {
activeElementClassDisplay.textContent = '无焦点元素';
}
}
});在这个示例中：
document.body.addEventListener('focusin', (event) => {
// event.target 就是当前获得焦点的元素
if (event.target.classList.contains('my-class')) {
console.log('带有 my-class 的元素获得焦点');
}
});document.activeElement 属性是JavaScript中获取当前焦点元素的强大工具。结合 classList.contains() 方法和 focus/blur 事件监听器，我们可以精确地判断并实时响应具有特定类名的元素是否获得焦点。这对于实现复杂的表单验证、自定义焦点管理、无障碍功能以及其他需要根据焦点状态进行动态行为调整的Web应用至关重要。理解并正确运用这些技术，将有助于提升用户体验和应用的交互性。
以上就是如何判断具有特定类名的元素是否获得焦点的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
547
收藏
