页面加载后让指定输入框自动获得焦点最直接方式是使用autofocus属性，但其在服务端渲染、动态插入表单及iOS Safari中可能失效；需用JavaScript时应确保元素存在、时机恰当（如DOM插入后），并注意iOS需用户手势触发。
页面加载后让指定输入框自动获得焦点
只要页面一打开，input 或 textarea 就该被选中，最直接的方式是加 autofocus 属性。它原生支持，不用写 JS，也不依赖框架。
-
autofocus只能用在单个元素上，浏览器会忽略后续多个同页面的autofocus - 如果页面有服务端渲染或动态插入表单（比如 Vue/React 中挂载后才出现），
autofocus可能失效——因为元素还没进 DOM - 移动端 Safari 对
autofocus支持有限，部分版本会静默忽略（尤其非用户手势触发的场景）
示例：
<input type="text" name="username" autofocus>
用 JavaScript 手动调用 focus() 确保执行时机
当需要更精细控制（比如等某个模块加载完、校验失败后跳转聚焦），就得用 JS。关键不是调不调 focus()，而是“什么时候调”。
- 放在
DOMContentLoaded里通常够用，但若表单是异步插入（如 fetch 后 render），得在插入 DOM 后立即调element.focus() - 某些 UI 库（如 Bootstrap Modal）会接管焦点逻辑，直接调
focus()可能被覆盖，需延迟或监听其生命周期钩子 - 调用前务必检查元素是否存在：
if (el && el.focus) el.focus()，否则报Cannot read property 'focus' of null
安全写法示例：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input[name="email"]');
if (input) input.focus();
});
避免 iOS Safari 和部分安卓浏览器的聚焦失效
iOS 上 focus() 必须由用户真实交互（如点击、触摸）触发，否则会被浏览器拦截。这是安全策略，无法绕过。
- 纯自动聚焦（无用户手势）在 iOS 上基本无效，
autofocus也一样 - 可行折中：监听一次用户点击（哪怕点空白处），再立刻对目标
input调focus()；或者把聚焦逻辑绑定在按钮点击事件里 - 某些安卓 WebView（尤其旧版）要求
input是 visible + not disabled + not readonly，否则focus()无声失败
聚焦后滚动行为与可访问性影响
自动聚焦会触发浏览器默认滚动，把元素拉到视口顶部，可能遮挡标题或导航栏。这不是 bug，是标准行为。
- 想禁用滚动？用
el.focus({ preventScroll: true })（Chrome 61+、Firefox 63+、Safari 15.4+ 支持） - 屏幕阅读器依赖聚焦顺序和
aria-label，如果自动聚焦跳过前面内容，可能破坏语义流；建议配合tabindex="-1"和手动focus()做更可控的引导 - 别对隐藏元素（
display: none或visibility: hidden）调focus()——它不会生效，也不会报错，只是静默失败
autofocus 够用就别上 JS；要用 JS，先确认元素存在、时机合理、平台兼容；iOS 上的自动聚焦，基本得靠用户点一下才能启动。 
