表单提交或重置后autofocus失效，需JavaScript手动聚焦；动态渲染需在框架生命周期钩子中调用focus()；iOS等环境须在用户手势上下文中执行并确保元素可见。
表单提交后输入框不会自动聚焦，autofocus 在提交后完全失效，必须用 JavaScript 主动控制焦点，且需避开常见时机和兼容性陷阱。
form.reset() 后 autofocus 不会重新触发
点击 <button type="reset"> 重置表单时，autofocus 属性不会被再次识别，焦点默认回到 document.body。浏览器不把 reset 视为“新加载”，所以不会重新执行 autofocus 解析逻辑。
- 必须监听
reset事件，在回调中手动调用input.focus() - 提前缓存目标元素引用，避免每次 reset 都重复查 DOM：
const usernameInput = document.getElementById('username'); - 加防御判断更稳妥：
if (usernameInput && document.activeElement !== usernameInput) usernameInput.focus();
动态渲染表单（Vue/React/SPA）中 focus() 的正确时机
框架内条件渲染或路由切换后插入的 <input>，即使写了 autofocus 也无效——因为 DOM 已挂载完成，浏览器早已跳过解析阶段。
- React：在
useEffect(() => { ref.current?.focus() }, [])中调用，且确保ref已绑定到真实 DOM 节点 - Vue：在
onMounted钩子中调用inputRef.value?.focus()，并确认v-if条件已为 true - 原生 JS：监听
DOMContentLoaded后再查元素；若表单由 AJAX 插入，应在插入完成后立即调用focus()
iOS Safari 和安卓 WebView 中 focus() 失效的硬约束
非用户手势上下文（如页面加载、定时器、AJAX 回调）中调用 focus()，iOS Safari 会静默拒绝，不报错、不弹键盘、document.activeElement 也不变。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 可靠解法：把
focus()绑定到一次性的用户事件里，例如document.body.addEventListener('click', () => input.focus(), { once: true }) - 模态框场景：在用户点击“打开表单”按钮的回调中立刻调用
input.focus()，而不是等动画结束再调 - 避免在
setTimeout或Promise.then中调用——哪怕只延迟 0ms，也可能掉出用户手势上下文
聚焦后软键盘遮挡输入框或布局错位
尤其在 iOS 上，focus() 成功后软键盘弹出，可能顶起页面、遮住输入框，或导致 position: fixed 元素错位。
- 聚焦前确保输入框在视口内：可调用
input.scrollIntoView({ block: 'nearest', inline: 'nearest' }) - 避免对
display: none或visibility: hidden的父容器内元素调用focus()，否则 iOS 可能直接失败 - 微信 WebView 等环境需额外加
ontouchstart=""属性，或 CSSinput { cursor: pointer; }辅助触发
真正难的不是写 focus() 这一行代码，而是判断它该在哪个时刻、以什么方式、对哪个状态下的元素去执行——时机错、状态错、上下文错，都会让这一行变成摆设。
