autofocus 是 HTML 布尔属性，仅初始渲染生效，JS 动态设置无效；需用 focus() 手动聚焦，支持 preventScroll、requestAnimationFrame 及框架 ref 调用，并注意无障碍与移动端体验。
在 JavaScript 中，autofocus 是一个 HTML 布尔属性，它本身由浏览器原生支持，**不能通过 JavaScript 动态设置为 true/false 来“开启/关闭”聚焦行为**。但你可以用 JavaScript 模拟或增强它的效果，比如手动调用 focus()、延迟聚焦、条件聚焦，或在动态插入元素后补上聚焦逻辑。
autofocus 属性的原生行为
直接在 HTML 中写 autofocus，浏览器会在页面加载完成且该元素可交互时自动聚焦（仅限第一个带该属性的可聚焦元素）：
注意：它只在初始渲染时生效；JS 后续给元素添加 autofocus 属性（如 el.setAttribute('autofocus', '')）**不会触发聚焦**，也不会影响已有行为。
用 JavaScript 手动聚焦（最常用）
当需要更灵活的控制（比如等数据加载完、校验通过、或响应用户操作），直接调用 .focus() 方法：
document.getElementById('myInput').focus();- 支持
focus({ preventScroll: true })防止页面自动滚动到该元素 - 可在
DOMContentLoaded、setTimeout或组件挂载后调用
动态内容中补聚焦（如模态框、单页应用）
HTML 中的 autofocus 在元素动态插入 DOM 时不会生效。此时需 JS 主动聚焦：
- 插入新表单后，立即选中首个可聚焦元素：
newForm.querySelector('input, select, textarea, [tabindex]:not([tabindex="-1"])')?.focus(); - 配合
requestAnimationFrame确保 DOM 已渲染：requestAnimationFrame(() => input.focus()); - Vue/React 中，在
mounted或useEffect里调用ref.current?.focus()
避免聚焦干扰用户体验
不是所有场景都适合自动聚焦。要注意以下几点：
- 屏幕阅读器用户可能被打断，建议结合
aria-live或上下文提示 - 移动端键盘弹出可能遮挡内容，可先检查
matchMedia('(hover: none)')判断是否为触屏设备 - 若页面有多个入口（如从搜索结果跳转），聚焦前可判断 URL 参数或来源，按需启用
- 聚焦前确保元素已显示且未被
display: none或visibility: hidden隐藏
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
