HTML5 autofocus属性仅对原生可聚焦、可交互且未禁用的元素生效；稳定支持类型包括text、search、email、tel、url、password、textarea和button；hidden、checkbox、radio、file等类型不支持或行为不可靠。
HTML5 中的 autofocus 属性本身不依赖输入类型，但能否真正聚焦，**取决于输入类型是否原生可聚焦、可交互且未被禁用**。不是所有 <input> 都能响应 autofocus，必须选对类型并确保状态合规。
哪些 input 类型支持 autofocus（稳定可用）
以下类型在主流浏览器中表现一致，可放心使用 autofocus：
-
<input type="text">（通用文本输入） -
<input type="search">（搜索框，含清空按钮语义） -
<input type="email">（邮箱格式提示 + 键盘优化） -
<input type="tel">（触屏弹出数字键盘） -
<input type="url">（URL 键盘适配） -
<input type="password">（密码字段，聚焦后光标定位正常） -
<textarea></textarea>（多行文本，支持 autofocus） -
<button></button>（如登录/提交按钮，聚焦后可回车触发）
哪些 input 类型不支持或行为不可靠
加了 autofocus 也无效，不是 bug，是规范限制：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<input type="hidden">：无界面、不可聚焦 -
<input type="checkbox">、<input type="radio">：需点击切换，非文本输入流 -
<input type="file">：安全策略限制，多数浏览器忽略 autofocus -
<input type="range">、<input type="color">、<input type="date">：部分支持聚焦但无输入意义，不推荐依赖 -
<select></select>：Chrome/Edge 可能响应，Firefox 和旧 Safari 基本不处理，别作为关键路径
结合 autofocus 的正确写法与常见陷阱
写法要规范，状态要合规：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<input type="search" name="q" autofocus>（布尔属性，不赋值最标准） - ⚠️ 兼容 XHTML 可写：
<input autofocus="autofocus">；但autofocus="true"或autofocus=""不符合 HTML5 规范 - ❌ 即使类型正确，若加了
disabled、style="display:none"、父级inert或visibility:hidden，autofocus 会被跳过 - ❌ 同一页面多个 autofocus：只有 DOM 中第一个解析到的生效，其余静默失效
动态场景下必须改用 JS focus()（尤其 SPA 和弹窗）
autofocus 只在 HTML 初始解析时起作用。Vue/React 渲染、模态框 show()、innerHTML 插入等场景，它完全不触发：
- React 示例：
useEffect(() => { ref.current?.focus(); }, []); - Vue 3 示例：
onMounted(() => inputRef.value?.focus()); - 原生 JS 模态框示例：在
modalEl.addEventListener('shown', () => input.focus())中调用 - 移动端兜底：绑定一次
click或touchstart，回调中立即input.focus()，iOS 才允许弹出键盘
