最直接方式是用focus()方法，但须确保dom就绪；推荐在domcontentloaded事件中执行document.getelementbyid('username').focus()，避免因元素未生成导致报错。
页面加载后自动聚焦到指定输入框
页面一打开就让某个 <input> 获得焦点，最直接的方式是用 focus() 方法。但必须确保 DOM 已就绪，否则调用会失败（Cannot read property 'focus' of null）。
常见错误：把 document.getElementById('xxx').focus() 写在 <script></script> 标签里，但该标签放在 中，此时元素还没生成。
- 推荐做法：把脚本放在
前，或包裹在DOMContentLoaded事件中 - 简单可靠写法：
document.addEventListener('DOMContentLoaded', () => { document.getElementById('username').focus(); }); - 如果使用 jQuery，
$(function(){ $('#username').focus(); })也等效，但纯 JS 更轻量、无依赖
input autofocus 属性和 script focus() 的区别
autofocus 是 HTML 原生属性，写在标签上即可：<input id="search" autofocus>。但它有明确限制：
- 一个页面中只能有一个
autofocus元素生效（浏览器忽略后续的） - 它不支持动态控制——比如用户点击按钮后再聚焦，
autofocus就完全没用 - 某些移动端浏览器（如 iOS Safari）会忽略
autofocus，尤其在非用户手势触发的上下文中 -
focus()可以随时调用，还能配合setFocus()或表单校验逻辑，灵活性高得多
focus() 失败的常见原因和绕过方案
即使 DOM 就绪，focus() 也可能静默失败，尤其在模态框、Tab 切换、iframe 或 Vue/React 动态渲染场景下。
- 元素被
display: none或visibility: hidden遮挡时，focus()不生效；需先确保offsetParent !== null或检查getComputedStyle(el).display !== 'none' - 在 Vue 中，若输入框由
v-if控制，需在nextTick后再调用：this.$nextTick(() => { this.$refs.inputEl.focus(); }); - React 函数组件可用
useEffect+ref，但要注意首次渲染后才可安全调用focus() - 部分浏览器（如 Chrome）对自动聚焦有策略限制：非用户主动操作（如点击）触发的
focus()可能被阻止，此时可加setTimeout(..., 0)模拟微任务延迟，有时能绕过
focus() 后光标位置与 select() 的配合使用
单纯 focus() 只让输入框获得焦点，但光标默认在末尾。如果想让用户直接编辑全部内容（比如搜索框清空后重输），应搭配 select()：
-
el.focus(); el.select();—— 注意顺序，必须先focus再select，否则无效 - 对
type="number"或某些受控组件，select()可能不生效；此时可改用setSelectionRange(0, el.value.length) - 需要兼容旧版 IE？
createTextRange已淘汰，现代项目无需考虑
复杂点在于：焦点行为受浏览器策略、框架生命周期、CSS 渲染状态共同影响，不是“调了就一定成功”。真要稳，得加存在性判断、可见性检查、以及必要时的重试逻辑。
