直接在搜索框元素添加autofocus属性即可实现自动聚焦，但仅页面首次加载生效，需确保元素可聚焦且未禁用，单页应用及移动端需JavaScript兜底处理。

直接在搜索框元素上添加 autofocus 属性即可，但要注意它只在页面首次加载时生效，且有兼容性和体验限制。

基础写法：加属性就行

autofocus 是布尔属性，不需要赋值。只要把它加到可聚焦的搜索框上，浏览器解析 HTML 时就会自动聚焦：

• <input type="search" name="q" placeholder="搜索..." autofocus>
• <input type="text" id="search-input" autofocus>
• <textarea id="search-area" autofocus></textarea>

注意：确保该元素不是 disabled 或 hidden 状态，否则 autofocus 无效。

必须遵守的关键规则

一个页面中只能有一个 autofocus 元素，否则行为不可靠：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

立即学习“前端免费学习笔记（深入）”；

• 多个 autofocus 标签时，浏览器通常只对第一个生效，其余被忽略
• 不要给 <input type="hidden">、<div> 或未设 <code>tabindex 的非表单元素加 autofocus —— 它们不支持
• SPA（如 React/Vue）中动态渲染的搜索框，autofocus 不起作用，因为它是 HTML 解析阶段触发的

移动端和老浏览器要兜底

iOS Safari 几乎总是忽略 autofocus，Android Chrome 也日趋严格。稳妥做法是用 JavaScript 补充：

• 监听 DOM 加载完成：DOMContentLoaded
• 聚焦前检查当前焦点位置，避免覆盖用户已有操作：if (input && document.activeElement !== input)
• 示例代码：
<script><br> document.addEventListener('DOMContentLoaded', () => {<br> const search = document.querySelector('input[type="search"], #search-input');<br> if (search && document.activeElement !== search) {<br> search.focus();<br> }<br> });<br> </script>

别忽视用户体验细节

自动聚焦不是“加上就完事”，还要考虑实际场景：

• 登录页或独立搜索页适合用 autofocus；首页顶部放搜索框却自动聚焦，可能打断用户浏览
• 屏幕阅读器会按 autofocus 跳转，若页面顶部有重要提示，建议延后聚焦或提供跳过链接
• 移动端过早弹出软键盘可能遮挡内容，尤其在模态框中，可改用用户点击按钮后再聚焦