如何用JavaScript监听页面中输入框是否获得焦点？

Question

**问题：** 在Web开发中，如何使用JavaScript监听页面中的输入框（``）是否获得焦点？能否通过事件监听器准确判断输入框的聚焦与失焦状态，并实现如输入提示、自动补全等功能？是否存在兼容性或性能方面的问题？应该如何优化？

Answer 1

一、基础概念：聚焦与失焦事件

在Web开发中，输入框（<input>）的聚焦（focus）和失焦（blur）是常见的用户交互行为。JavaScript提供了两个原生事件：focus 和 blur，用于监听这些状态变化。

• focus 事件：当用户将光标置于输入框内时触发。
• blur 事件：当用户离开输入框时触发。

例如：

const input = document.querySelector('input');
input.addEventListener('focus', () => {
    console.log('输入框获得焦点');
});
input.addEventListener('blur', () => {
    console.log('输入框失去焦点');
});
    

二、实现功能：输入提示与自动补全

通过监听 focus 和 blur 事件，可以控制 UI 的显示与隐藏，例如展示输入提示或自动补全下拉框。

示例代码如下：

const input = document.querySelector('#searchInput');
const suggestions = document.querySelector('#suggestions');

input.addEventListener('focus', () => {
    suggestions.style.display = 'block';
});

input.addEventListener('blur', () => {
    setTimeout(() => {
        suggestions.style.display = 'none';
    }, 100); // 延迟隐藏，防止点击建议项时菜单消失
});
    

该方法适用于简单的搜索框提示场景。

三、兼容性分析

现代浏览器普遍支持 focus 和 blur 事件，但在移动端或旧版本浏览器中可能需要额外处理。

浏览器	是否支持 focus/blur	备注
Chrome	✅	所有版本均支持
Firefox	✅	所有版本均支持
Safari	✅	iOS 支持良好
IE 9+	✅	需注意 DOM 加载顺序

若需兼容 IE8 及更早版本，则应使用 onfocus 和 onblur 属性方式绑定事件。

四、性能问题与优化策略

虽然 focus 和 blur 是轻量级事件，但频繁触发其他逻辑（如异步请求获取建议内容）可能导致性能下降。

常见优化手段包括：

1. 节流（Throttle）或防抖（Debounce）机制：避免高频重复请求。
2. 延迟隐藏建议框：使用 setTimeout 防止误触关闭。
3. DOM 操作优化：避免频繁修改样式或插入节点。

示例：使用 debounce 控制输入建议请求频率：

function debounce(fn, delay) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

input.addEventListener('input', debounce(fetchSuggestions, 300));
    

五、进阶技巧：结合 MutationObserver 监听动态表单

对于动态加载的输入框（如 AJAX 表单），传统的事件绑定可能失效。此时可使用 MutationObserver 监控 DOM 变化，并动态绑定事件。

流程图示意：

graph TD
            A[开始观察DOM变化] --> B{检测到新增input元素?}
            B -- 是 --> C[为新元素绑定focus/blur事件]
            B -- 否 --> D[继续等待变化]

示例代码片段：

const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
            if (node.tagName === 'INPUT') {
                node.addEventListener('focus', handleFocus);
                node.addEventListener('blur', handleBlur);
            }
        });
    });
});

observer.observe(document.body, { childList: true, subtree: true });