autofocus属性使表单元素在页面加载后自动获焦，适用于input、textarea、select、button等；应仅设一个，iOS Safari常忽略，需JS兜底。
HTML5 的 autofocus 属性可以让指定的表单元素在页面加载完成后自动获得焦点，无需 JavaScript 即可实现。它适用于 <input>、<textarea></textarea>、<select></select> 和 <button></button> 等可聚焦元素。
基本用法：直接添加 autofocus 属性
只需在目标元素上添加 autofocus 属性（无需赋值），浏览器会在页面加载后自动将其设为焦点：
<input type="text" name="username" autofocus>
注意：一个页面中**应仅有一个**元素使用 autofocus。若多个元素都设置了该属性，浏览器通常只对第一个生效，行为可能不一致，不建议这样做。
与 JavaScript 的 focus() 方法有何不同？
autofocus 是声明式、原生的 HTML 行为，由浏览器在 DOM 就绪后自动触发；而 element.focus() 是命令式调用，需手动控制时机（如监听 DOMContentLoaded 或 window.onload）。
立即学习“前端免费学习笔记（深入）”；
- autofocus 在页面解析过程中即被识别，更早生效，且不受脚本执行顺序影响
- focus() 更灵活，可动态判断条件后再聚焦（例如根据 URL 参数决定是否聚焦）
- autofocus 不会触发
focus事件（部分旧版浏览器可能有差异），如需监听聚焦动作，仍需配合 JS
兼容性与注意事项
现代主流浏览器（Chrome、Firefox、Safari、Edge）均支持 autofocus，但存在几个关键限制：
- 在 iOS Safari 中，autofocus 通常被忽略，尤其在非用户手势触发的上下文中（如页面自动加载）
- 如果页面通过 iframe 加载，或元素位于
display: none或visibility: hidden容器中，autofocus 可能失效 - 屏幕阅读器等辅助技术会尊重 autofocus，有助于提升可访问性，但需确保聚焦逻辑符合用户预期（例如不应让登录页自动聚焦密码框）
替代方案：需要兼容 iOS 或复杂逻辑时用 JS
当 autofocus 不可靠（如 iOS 场景）或需条件判断时，可用 JavaScript 补充：
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input[name="search"]');
if (input && document.activeElement !== input) {
input.focus();
}
});
注意：调用 focus() 前最好检查 document.activeElement，避免重复聚焦干扰用户操作（例如用户已在其他输入框中打字）。
