可通过 focus 和 blur 事件监听输入框聚焦与失焦，实现视觉反馈、校验触发等；focus 在点击或 Tab 进入时触发，blur 在离开时触发；blur 不冒泡，委托需用 focusout；常配合 class 切换或 isFocused 状态变量控制样式与逻辑；禁用时无焦点事件；自动聚焦推荐用 autofocus 属性。
可以通过 focus 和 blur 事件监听输入框的聚焦与失焦行为，配合 CSS 类名切换或状态变量更新，实现视觉反馈、表单校验触发、提示文案显示等交互逻辑。
监听 focus 与 blur 事件
原生 JavaScript 中，focus 在用户点击/按 Tab 进入输入框时触发，blur 在焦点离开时触发。两者都支持事件监听器写法：
- 使用
addEventListener绑定，更灵活且可多次添加 - 也可直接赋值给
onfocus/onblur属性（但会覆盖已有处理） - 注意：
blur不冒泡，若需委托，要用focusout（它冒泡）
切换 CSS 类控制样式
常见做法是添加/移除一个如 focused 的类，配合 CSS 实现边框变色、阴影增强等效果：
input.addEventListener('focus', () => input.classList.add('focused'));
input.addEventListener('blur', () => input.classList.remove('focused'));
CSS 示例：
input { border: 1px solid #ccc; }
input.focused { border-color: #007bff; box-shadow: 0 0 4px rgba(0,123,255,.25); }
配合状态变量做逻辑控制
在 Vue、React 或纯 JS 应用中，常结合响应式变量管理聚焦状态：
- 定义布尔变量
isFocused = false，focus时设为true，blur时设为false - 可用于控制是否显示帮助文本、是否启用实时校验、是否清空默认提示等
- 注意：若输入框被禁用（
disabled），不会触发focus/blur
处理自动聚焦与初始状态
页面加载后若需默认聚焦，可用 input.focus()，但需确保 DOM 已就绪且无障碍友好：
- 避免在非用户主动操作下强制聚焦，尤其对屏幕阅读器不友好
- 若必须自动聚焦，建议加
autofocus属性（语义更清晰，且由浏览器统一管控） - 初始状态应与实际焦点一致——比如页面加载后已聚焦，JS 中的
isFocused也应初始化为true
