autofocus 属性仅在页面初始加载且元素已渲染时生效，不响应重载、路由切换、动态插入或JS修改；多个autofocus元素仅第一个有效；受遮罩层、iOS隐藏状态、disabled/readonly及iframe上下文限制；推荐用JS focus()配合用户交互确保可靠性。
autofocus 属性是否一加载就生效？
autofocus 是布尔属性，浏览器会在页面加载完成、表单渲染完毕后，自动将焦点设到该 <input> 上。但它只在“初始渲染”时起作用 —— 页面重载、SPA 路由切换、动态插入的元素都不会触发它。
- 不会因 JavaScript 修改
autofocus属性而重新聚焦（比如el.setAttribute('autofocus', '')无效） - 多个
autofocus元素同时存在时，仅第一个有效 - 若页面有弹窗、遮罩层或
contenteditable区域抢先捕获焦点，autofocus可能被静默忽略 - 在 iOS Safari 中，若输入框被包裹在
display: none或未渲染的 tab pane 里，autofocus不会生效
为什么加了 autofocus 却没聚焦？常见原因排查
最常踩的坑不是写错属性，而是时机或上下文不对：
-
autofocus放在模态框内部但模态框初始display: none或visibility: hidden→ 浏览器跳过聚焦 - 使用 Vue/React 等框架时，
autofocus写在组件模板里，但组件挂载前 DOM 尚未就绪 → 建议改用ref+focus()手动调用 - 页面含
<iframe>且主文档未获得用户交互（如点击）→ 部分浏览器（尤其移动端）会阻止自动聚焦以防止骚扰 - 输入框被
disabled或readonly→autofocus无效（即使属性存在）
替代方案：JavaScript focus() 更可控
当 autofocus 不可靠时，用 JS 主动聚焦更稳妥，尤其适合动态场景：
- 确保 DOM 已就绪：
document.addEventListener('DOMContentLoaded', () => { input.focus(); }) - Vue 中推荐在
mounted或onMounted里调用：inputRef.value?.focus() - React 中用
useEffect+ref，注意加防抖判断是否已聚焦：if (inputRef.current && document.activeElement !== inputRef.current) inputRef.current.focus() - 若需等待动画结束再聚焦（如 modal fade-in），用
setTimeout或transitionend事件，避免聚焦被 CSS 动画打断
移动端键盘自动弹出是否 guaranteed？
不是。iOS 和部分 Android 浏览器明确限制：仅响应用户主动触发的事件（如 click、touchend）才能唤起软键盘。autofocus 或脚本 focus() 在无用户手势上下文时，只会让光标定位，不触发键盘。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：绑定一次用户点击（哪怕透明按钮），再调用
focus()；或把聚焦逻辑放在button的onclick里 - 某些 PWA 场景下，首次安装后打开页面可能允许键盘弹出，但不可依赖
-
inputmode属性（如inputmode="text"）不影响聚焦行为，只提示键盘类型
autofocus 表面简单，实际受渲染时机、框架生命周期、移动端策略三重约束；真正可靠的聚焦，往往得靠一次手动 focus() + 明确的用户交互上下文。
