怎样让HTML表单的输入框自动获取焦点-html教程-PHP中文网

autofocus仅在初始HTML解析时生效，动态插入元素无效；多元素中仅首个生效，且不可JS动态设置；移动端需用户手势触发focus()才可靠。

怎样让html表单的输入框自动获取焦点

autofocus 属性只在初始 HTML 解析时生效

页面加载时自动聚焦，首选 autofocus 属性。它写法简单：，浏览器会在 DOM 解析完成、元素可聚焦时自动调用 focus()。但这个行为有硬性限制：

autofocus 仅对初始 HTML 中已存在的元素起作用；通过 innerHTML、appendChild 或框架（Vue/React）动态插入的会忽略该属性
一个页面中多个 autofocus 只有第一个被解析的元素生效，后续全部失效
不支持 JS 动态设置：el.autofocus = true 或 el.setAttribute('autofocus', '') 都无效
仅适用于可聚焦的表单控件：（非 type="hidden" 或 disabled）、、；等不支持 DOMContentLoaded 后手动 focus() 必须等 DOM 挂载完成当 autofocus 失效（比如模态框、SPA 路由切换、条件渲染），就得用 JS 主动聚焦。常见错误是过早执行：在 DOMContentLoaded 之前调用 document.getElementById('x').focus() → 报错 Cannot read property 'focus' of null 在 Vue 的 created 或 React 的 render 阶段调用 → 元素尚未挂载，ref 为 null 正确时机：Vue 用 mounted + nextTick，React 用 useEffect + ref，原生 JS 用 DOMContentLoaded 回调加一层防御判断更稳妥：if (input && document.activeElement !== input) input.focus()，避免覆盖用户已手动聚焦的元素移动端 Safari 和 Chrome 会拦截非用户手势触发的 focus() 即使 DOM 已就位、JS 也执行了 focus()，iOS Safari 和新版 Android Chrome 仍可能静默失败——光标不出现，document.activeElement 还是 body。这是因为浏览器策略限制非用户交互（如页面加载、定时器）触发的焦点获取。 Wechat Article Html 将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。下载典型现象：桌面端正常，iOS 上无反应，控制台无报错可靠解法：把 focus() 绑定到用户事件里，例如若必须程序触发（如弹窗打开后），可用 input.focus({ preventScroll: true })（Chrome 55+/Safari 15.4+ 支持），旧版需 fallback 到用户点击后微任务延迟注意：不要用 requestAnimationFrame 替代 setTimeout(fn, 0)，它执行太晚，常错过焦点激活窗口 focus() 后立即 select() 要防 Safari 异步拦截想让输入框聚焦后自动选中全部内容，不能直接在 focus 事件里调 input.select()，尤其在 iOS Safari 上大概率失效（光标定位了，但文字不选中）。根本原因：浏览器在某些上下文（如标签页切换后、JS 触发 focus）中会同步拦截 select() 稳定写法：input.addEventListener('focus', () => setTimeout(() => input.select(), 0)) 如果同时用了 autofocus，必须监听 focus 事件，而不是 DOMContentLoaded，否则首次聚焦会漏掉 type="number"、type="date" 等非文本输入框不支持 select()，调用无效真正容易被忽略的是「动态场景下的时机判断」和「移动端策略差异」。autofocus 不是开关，focus() 也不是万能药；浏览器对焦点的管控越来越细，尤其是涉及软键盘弹出时，必须把用户手势作为前提来设计逻辑。