什么是 HTML DOM hasFocus() 方法？
在前端开发中，我们经常需要判断用户当前是否正在与某个页面元素进行交互。比如，当用户点击输入框时，我们可能想立刻改变它的样式，或者在用户离开输入框时执行某些清理操作。这时候，hasFocus() 方法就派上用场了。
HTML DOM hasFocus() 方法是 DOM（文档对象模型）提供的一个实用工具，用于检测当前页面中是否有某个元素获得了焦点（focus）。它返回一个布尔值：true 表示该元素当前拥有焦点，false 表示没有。
你可以把“焦点”想象成用户当前“注意力”的所在位置。就像你在写作文时，笔尖落在哪一行，哪一行就是当前的焦点区域。在网页中，当用户点击一个输入框、按钮或可编辑区域时，这些元素就会“获得焦点”，此时它们就处于可交互状态。
hasFocus() 方法通常作用于 document 对象或某个具体的 DOM 元素，但需要注意的是：它只能用于检测当前文档是否拥有焦点，而不是用于判断某个元素是否被选中或激活。换句话说，这个方法是“全局”视角的，它回答的是“整个页面”是否在用户关注范围内。
⚠️ 重要提示：
hasFocus()方法必须在浏览器环境中运行，不能在 Node.js 等服务端环境中使用。
如何使用 hasFocus() 检测页面焦点状态？
最常见且最简单的用法是检测当前页面是否获得了焦点。例如，我们可以在浏览器标签页切换时，通过 hasFocus() 来判断用户是否回到了当前页面。
下面是一个完整的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>hasFocus() 示例</title>
</head>
<body>
<h2>当前页面焦点状态： <span id="status">未知</span></h2>
<p>请尝试切换浏览器标签页，观察状态变化。</p>
<script>
// 获取显示状态的元素
const statusElement = document.getElementById('status');
// 定义一个函数来检查页面是否获得焦点
function checkFocus() {
// 使用 document.hasFocus() 检查当前页面是否有焦点
if (document.hasFocus()) {
statusElement.textContent = '已获得焦点';
} else {
statusElement.textContent = '失去焦点';
}
}
// 页面加载完成后立即检查一次
window.addEventListener('load', checkFocus);
// 监听页面可见性变化事件，包括标签页切换
document.addEventListener('visibilitychange', checkFocus);
// 也可以监听 focus 和 blur 事件，更精确地捕捉焦点变化
window.addEventListener('focus', () => {
statusElement.textContent = '已获得焦点';
});
window.addEventListener('blur', () => {
statusElement.textContent = '失去焦点';
});
</script>
</body>
</html>
代码详解：
document.hasFocus()：核心方法，返回布尔值。window.addEventListener('load', ...)：页面加载完成后执行一次检测。document.addEventListener('visibilitychange', ...)：当标签页从隐藏变为可见（或反之）时触发，是检测焦点变化的重要事件。window.addEventListener('focus')和blur：更直接的焦点事件，适合做实时反馈。
这个例子展示了 HTML DOM hasFocus() 方法在实际项目中的典型应用场景：监控用户是否回到当前页面，从而决定是否重新加载数据或提醒用户。
判断特定元素是否获得焦点
虽然 hasFocus() 主要用于 document，但你也可以结合 activeElement 属性来判断某个特定元素是否拥有焦点。
document.activeElement 返回当前获得焦点的元素（如 input、button 等），我们可以用它来配合 hasFocus() 实现更精细的控制。
<input type="text" id="username" placeholder="请输入用户名" />
<button id="btn">提交</button>
<script>
// 获取两个元素
const usernameInput = document.getElementById('username');
const submitButton = document.getElementById('btn');
// 监听输入框的 focus 和 blur 事件
usernameInput.addEventListener('focus', function () {
console.log('用户名输入框获得了焦点');
// 使用 hasFocus() 验证当前页面是否活跃
if (document.hasFocus()) {
console.log('页面处于激活状态，可以继续输入');
} else {
console.log('页面未激活，输入可能无效');
}
});
usernameInput.addEventListener('blur', function () {
console.log('用户名输入框失去了焦点');
});
// 检查按钮是否被聚焦
submitButton.addEventListener('focus', function () {
console.log('提交按钮获得了焦点');
// 检查当前页面是否拥有焦点
if (document.hasFocus()) {
console.log('按钮已聚焦，且页面活跃');
} else {
console.log('按钮聚焦但页面未激活');
}
});
</script>
关键点说明：
document.activeElement是一个只读属性，返回当前焦点元素。- 你可以在任何时刻通过
document.activeElement === element来判断某个元素是否被聚焦。 hasFocus()与activeElement可以组合使用，实现更智能的交互逻辑。
实际应用场景：表单自动提示与校验
在表单开发中，HTML DOM hasFocus() 方法可以用来优化用户体验。比如，当用户点击某个输入框时，我们希望立即显示提示信息；但如果用户已经离开该输入框，我们又不希望提示一直显示。
下面是一个实际案例：当输入框获得焦点时显示帮助文本，失去焦点后隐藏。
<div class="form-group">
<label for="email">邮箱地址：</label>
<input type="email" id="email" placeholder="请输入邮箱" />
<div id="email-help" class="help-text" style="display: none;">
请填写有效的邮箱格式，如 example@domain.com
</div>
</div>
<script>
const emailInput = document.getElementById('email');
const helpText = document.getElementById('email-help');
// 当输入框获得焦点时显示帮助信息
emailInput.addEventListener('focus', function () {
// 使用 hasFocus() 确保页面是激活状态
if (document.hasFocus()) {
helpText.style.display = 'block';
}
});
// 当输入框失去焦点时隐藏帮助信息
emailInput.addEventListener('blur', function () {
helpText.style.display = 'none';
});
// 可选：当用户切换标签页时也隐藏提示
document.addEventListener('visibilitychange', function () {
if (document.visibilityState === 'hidden') {
helpText.style.display = 'none';
}
});
</script>
这个设计避免了“提示信息卡在页面上”的尴尬情况，尤其是在用户切换标签页后，帮助信息会自动隐藏，提升整体体验。
注意事项与常见误区
在使用 hasFocus() 时，有几个容易踩坑的地方需要特别注意：
1. 不能在 iframe 中直接调用 document.hasFocus()
如果你在一个嵌套的 iframe 中运行代码，document.hasFocus() 只会判断该 iframe 是否获得焦点，而不是父页面。如果想判断整个页面是否活跃，应该在顶层 window 上监听。
2. hasFocus() 不会响应鼠标点击事件本身
它只反映当前的焦点状态，而不是“是否刚刚被点击”。因此，不能依赖它来判断用户点击了某个按钮，而应使用 click 事件。
3. 在某些移动端浏览器中行为不一致
部分移动浏览器对 hasFocus() 的支持较弱，尤其是在多窗口或分屏模式下。建议在移动端使用 visibilitychange 事件作为主要判断依据。
4. hasFocus() 是同步方法，不会阻塞主线程
它是一个轻量级的查询操作，几乎不影响性能，适合频繁调用。
高级技巧：结合事件监听实现智能反馈
你可以将 hasFocus() 与 focusin / focusout 事件结合，实现更复杂的交互逻辑。
// 监听所有可聚焦元素的焦点变化
document.addEventListener('focusin', function (event) {
// event.target 是获得焦点的元素
console.log('元素获得焦点：', event.target.tagName);
// 检查页面是否处于激活状态
if (document.hasFocus()) {
console.log('页面活跃，允许交互');
} else {
console.log('页面非活跃，可能忽略操作');
}
});
document.addEventListener('focusout', function (event) {
console.log('元素失去焦点：', event.target.tagName);
});
focusin 和 focusout 是支持事件冒泡的版本，适合在父容器上统一监听，特别适合动态生成的元素。
总结：为什么你应该掌握 hasFocus() 方法？
HTML DOM hasFocus() 方法虽然看似简单，但在实际项目中作用非常大。它帮助我们理解用户的真实交互意图，避免在页面不可见时执行无效操作，提升应用的健壮性和用户体验。
无论是表单提示、数据刷新、还是动画控制，只要涉及到“用户是否在关注当前页面”，hasFocus() 都是一个值得掌握的工具。
记住：一个优秀的前端应用，不仅要看功能是否实现，更要看它是否“懂用户”。而 hasFocus()，正是让网页“感知”用户状态的重要一环。
现在，你已经掌握了如何使用这个方法，并能将其融入自己的项目中。不妨动手试试，在下一个项目里加入焦点状态检测，让页面更“聪明”一点。