最直接方式是添加 autofocus 属性，仅限静态 HTML 有效；动态插入需用 JS 在 DOM 就绪后调 focus()；注意移动端 Safari 限制及模态框内失效问题。
页面加载后自动聚焦到某个 input 元素
最直接的方式是给目标 input 添加 autofocus 属性，浏览器会在页面加载完成、表单可交互时自动将焦点设到该元素上：
-
autofocus是布尔属性，写上即生效，无需赋值（autofocus="true"反而是冗余写法） - 一个页面中只能有一个
input使用autofocus，多个时仅第一个生效 - 它在服务器端渲染或静态 HTML 中最可靠；若元素是 JS 动态插入的，
autofocus通常无效
<input type="text" name="username" autofocus>
用 JavaScript 手动调用 focus() 的时机问题
动态插入的 input 或需要更精细控制聚焦时机时，得用 JS。但常见错误是：DOM 还没就绪就调 focus()，报错 Cannot read property 'focus' of null 或无反应。
- 确保元素已挂载到 DOM：用
document.addEventListener('DOMContentLoaded', ...)或把脚本放在</body>前 - 如果
input在 Vue/React 等框架中由状态驱动渲染，必须等组件挂载完成后再调focus()（例如 Vue 的mounted钩子，React 的useEffect+ref） - 移动端 Safari 对自动聚焦限制严格——即使调了
focus()，若非用户手势触发（如点击），可能静默失败
document.getElementById('myInput').focus();
autofocus 和 JS focus() 的兼容性与行为差异
两者触发时机和约束不同，选错会导致体验断裂。
-
autofocus会触发focus事件，但不会触发focusin（部分老浏览器）；JSfocus()同样触发focus，但不触发blur前置逻辑（除非手动模拟） - Chrome 和 Firefox 支持
autofocus在模态框内元素上生效；Safari 则常忽略模态框中后来插入的autofocus元素 - 屏幕阅读器对
autofocus有明确支持，会朗读聚焦元素的标签；JSfocus()若未同步设置aria-label或关联label，可能造成无障碍缺失
表单重置后恢复自动聚焦
用户点击 <button type="reset"> 后，autofocus 不会重新生效，焦点会回到页面顶部。需手动干预。
立即学习“前端免费学习笔记（深入）”；
- 监听
reset事件，在事件回调里再次调用目标input的focus() - 注意：
reset事件触发时，表单字段已还原为初始值，但 DOM 结构未变动，此时focus()安全可用 - 避免在
reset里重复获取元素引用——应提前缓存input节点，防止多次查询
form.addEventListener('reset', () => { myInput.focus(); });
实际项目里最容易被忽略的是移动端 Safari 的聚焦限制和模态框内的 autofocus 失效问题。别只测 Chrome，真机连 iOS 测一遍再上线。 
