HTML5中Autofocus属性实现页面加载后自动聚焦-H5教程-PHP中文网

autofocus属性使表单元素在页面加载后自动获焦，适用于input、textarea、select、button等；应仅设一个，iOS Safari常忽略，需JS兜底。

html5中autofocus属性实现页面加载后自动聚焦

HTML5 的 autofocus 属性可以让指定的表单元素在页面加载完成后自动获得焦点，无需 JavaScript 即可实现。它适用于、、和等可聚焦元素。

基本用法：直接添加 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，避免重复聚焦干扰用户操作（例如用户已在其他输入框中打字）。