输入框自动聚焦与失焦本质是通过 JavaScript 调用 focus() 和 blur() 方法，结合 DOMContentLoaded 或用户手势触发；需处理动态渲染、全局点击失焦、焦点样式响应及移动端兼容性。
输入框自动聚焦与失焦，本质是通过 JavaScript 操作 DOM 元素的 focus() 和 blur() 方法，并结合合适的时机（如页面加载、用户交互）来触发。
页面加载后自动聚焦输入框
最常见场景：表单打开时，光标直接落在第一个输入框。需确保元素已渲染完成，推荐用 DOMContentLoaded 事件或 defer 脚本。
- 使用
document.getElementById或querySelector获取输入框元素 - 调用其
focus()方法；可选加{ preventScroll: true }避免页面滚动 - 若输入框被动态插入（如 Vue/React 渲染后），需在插入完成后再调用
focus()
示例：
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#username');
if (input) input.focus();
});
点击其他区域时让输入框失焦
常用于模拟“点击空白处收起键盘”或关闭输入相关浮层。关键在于监听全局点击，排除输入框自身及其子元素。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 给
document绑定click事件 - 检查点击目标是否为当前输入框或其后代（可用
closest()判断） - 如果不是，调用
input.blur()
示例：
const input = document.querySelector('#search');
document.addEventListener('click', (e) => {
if (!input.contains(e.target) && e.target !== input) {
input.blur();
}
});
聚焦/失焦时的样式与行为响应
仅操作焦点还不够，通常需同步更新 UI 状态，比如高亮边框、显示提示文字或触发表单验证。
- 监听
focus和blur事件，而非仅手动调用方法 - 在
focus中添加类名（如focused），在blur中移除 - 注意：手动调用
focus()不会自动触发focus事件，需自行 dispatch（一般不需要）
示例：
input.addEventListener('focus', () => {
input.classList.add('focused');
});
input.addEventListener('blur', () => {
input.classList.remove('focused');
});
移动端兼容性与注意事项
在 iOS Safari 或部分安卓 WebView 中，自动聚焦可能被浏览器阻止（尤其非用户手势触发时），且软键盘行为更敏感。
- 自动聚焦最好绑定在用户明确操作之后（如点击按钮、切换 Tab）
- 避免在
load事件中聚焦，改用DOMContentLoaded+ 用户手势兜底 - 失焦时调用
blur()通常可靠，但无法强制关闭软键盘；可配合input.blur(); input.style.outline = 'none';减少视觉干扰
