表单首字段不自动聚焦需统一用js控制：删除autofocus属性，react用useref+useeffect，vue3用onmounted+ref；同时确保存在type="submit"按钮并正确绑定enter提交逻辑。
表单首字段不自动聚焦？检查 autofocus 是否被覆盖或禁用
浏览器原生支持 autofocus，但实际不生效往往不是语法错，而是被更高优先级行为覆盖。比如页面加载后 JS 主动调用了 focus() 到其他元素，或者用户刚切回标签页时焦点被系统重置。
-
autofocus只在元素首次插入 DOM 且未被 JS 干预时触发，后续 JS 调用focus()会覆盖它 - 某些浏览器（如 Safari 移动端）在页面非活跃状态（后台标签页）下会忽略
autofocus - 如果表单是动态渲染的（如 Vue/React 组件挂载后才插入），
autofocus属性无效，必须用 JS 手动focus() - Chrome 89+ 对 iframe 内嵌页面的
autofocus有更严格限制，需确保 iframe 具有allow="autofocus"
React/Vue 中怎么让首字段自动聚焦？别依赖 autofocus
框架组件的生命周期和 DOM 渲染时机与原生 HTML 不同，autofocus 在 JSX 或模板中写上基本没用——组件 mount 时 DOM 可能还没就绪，或者被框架的 hydration 过程绕过。
- React：用
useRef+useEffect，在useEffect(() => { ref.current?.focus(); }, [])中触发 - Vue 3：用
onMounted+ref，确保 DOM 已挂载：onMounted(() => inputRef.value?.focus()) - 注意防错：加可选链
?.focus()，避免 SSR 渲染时ref.current为 null 报错 - 不要在
setTimeout里硬等，延迟不可控，且可能触发两次焦点（autofocus+ JS）导致体验卡顿
autofocus 和 JS focus() 混用会出什么问题？
两者同时存在，容易引发焦点跳变、屏幕阅读器播报异常、甚至 iOS Safari 上键盘反复弹起收起。
- Chrome 会优先执行
autofocus，但 JS 的focus()若在稍后 microtask 中执行，会再次抢走焦点，造成“闪一下又失去”的现象 - 无障碍场景下，屏幕阅读器通常只播报第一次获得焦点的元素；重复
focus()可能导致播报遗漏或重复 - 移动端尤其敏感：iOS Safari 对连续
focus()调用有防抖，有时干脆不唤起键盘 - 解决办法很直接：删掉 HTML 中的
autofocus，统一由 JS 控制，确保只触发一次
为什么登录页首字段聚焦后，按 Enter 却没提交？
这和聚焦本身无关，而是表单提交逻辑没绑定到 Enter 键事件，或者 button[type="submit"] 缺失/被样式隐藏。
立即学习“前端免费学习笔记（深入）”；
- HTML 表单默认行为：当一个
input获得焦点，且表单内存在button[type="submit"]或input[type="submit"]时，按 Enter 才会触发表单提交 - 常见坑：用
div或普通button（无type属性）模拟提交按钮，此时 Enter 键完全无响应 - React/Vue 中若用
onClick处理提交，记得同时监听onKeyDown={e => e.key === 'Enter' && handleSubmit()} - 别忘了
event.preventDefault()，否则原生提交可能刷新页面，掩盖了 JS 提交逻辑
