JavaScript中监听输入框焦点状态最直接的方式是使用focus/blur事件，支持addEventListener绑定；需表单级统一处理时可用支持冒泡的focusin/focusout；实时判断可用document.activeElement严格比较。
在 JavaScript 中监听输入框的 focus 和 blur 事件，是最直接、标准的方式获取其焦点状态变化。这两个事件分别在元素获得焦点和失去焦点时触发，无需轮询或定时检测。
使用 addEventListener 绑定 focus/blur 事件
推荐使用现代事件监听方式，避免内联事件（如 onfocus）带来的维护问题：
- 为输入框元素调用
addEventListener('focus', handler)监听获得焦点 - 调用
addEventListener('blur', handler)监听失去焦点 - 两个事件互为反向状态：focus → 有焦点；blur → 无焦点
示例：
const input = document.querySelector('#myInput');
input.addEventListener('focus', () => {
console.log('输入框已获得焦点');
// 可在此展开：显示提示、清除默认提示文字、添加高亮边框等
});
input.addEventListener('blur', () => {
console.log('输入框已失去焦点');
// 可在此展开：校验内容、保存值、隐藏辅助面板等
});
用 focusin / focusout 替代（支持事件冒泡）
如果需要监听**整个表单区域**（比如父容器）内任意子输入框的焦点变化，可使用 focusin 和 focusout：
立即学习“Java免费学习笔记（深入）”；
- 它们与
focus/blur功能类似，但支持事件冒泡 -
focus和blur不冒泡，无法在父元素上统一监听 - 适合表单级统一处理：例如点击任意输入框时收起键盘提示、高亮当前区域
示例：
const form = document.querySelector('#myForm');
form.addEventListener('focusin', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
console.log('聚焦到：', e.target.name);
}
});
form.addEventListener('focusout', (e) => {
if (e.target.matches('input, textarea')) {
console.log('离开：', e.target.name);
}
});
实时获取当前是否聚焦（检查 document.activeElement）
有时需在任意时刻判断某个输入框是否正在聚焦（比如在按钮点击时做条件判断），可用：
-
document.activeElement返回当前获得焦点的 DOM 元素 - 配合
===严格比较，确认是否是目标输入框 - 注意：初始页面加载时
activeElement可能是<body>或<input>（如有autofocus）
示例：
function isInputFocused(inputEl) {
return document.activeElement === inputEl;
}
// 调用
if (isInputFocused(document.querySelector('#myInput'))) {
console.log('它正被聚焦');
}
注意事项与常见陷阱
实际开发中容易忽略的细节：
- 移动端软键盘弹出可能不触发
blur（尤其 iOS Safari），建议结合input或change做兜底 -
focus()方法调用后，不一定立即触发focus事件（异步时机），如需确保，可用setTimeout(..., 0)延迟读取 - 禁用（
disabled）或只读（readonly）的输入框无法获得焦点，绑定事件也无效 - 动态插入的输入框需在插入 DOM 后再绑定事件，或使用事件委托（对
focusin/focusout更友好）
