JavaScript 中怎么监听输入框的 focus 和 blur 获取焦点状态-js教程-PHP中文网

javascript中监听输入框焦点状态最直接的方式是使用focus/blur事件，支持addeventlistener绑定；需表单级统一处理时可用支持冒泡的focusin/focusout；实时判断可用document.activeelement严格比较。

javascript 中怎么监听输入框的 focus 和 blur 获取焦点状态

在 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：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

它们与 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 可能是或 <input>（如有 autofocus）

示例：

function isInputFocused(inputEl) {
  return document.activeElement === inputEl;
}

// 调用
if (isInputFocused(document.querySelector('#myInput'))) {
  console.log('它正被聚焦');
}