autofocus 在 SPA 中基本无效，因其是 HTML 解析阶段的静态行为，仅对初始 DOM 中存在的 textarea 生效；动态渲染的 textarea 需用 JS 主动调用 .focus()，并确保元素已挂载、无其他元素聚焦、移动端允许弹窗键盘。
autofocus 在 textarea 上为什么在 SPA 里基本无效
因为 autofocus 是 HTML 解析阶段的静态行为，只对初始 DOM 中已存在的 textarea 生效。React/Vue/Angular 等框架中动态渲染的 textarea（比如挂载在 useEffect 或 mounted 钩子后插入），浏览器根本不会识别其 autofocus 属性——哪怕你写了 <textarea autofocus></textarea>，它也和没写一样。
怎么让 SPA 中的 textarea 真正自动聚焦
必须用 JS 主动调用 .focus()，且要满足三个前提：
- 元素已挂载到 DOM（不能在渲染前就调用）
- 当前没有其他元素正在聚焦（避免覆盖用户操作）
- 移动端需额外判断是否允许弹出键盘（尤其 iOS Safari）
推荐写法（以 React 为例）：
useEffect(() => {
const el = document.getElementById('comment-area');
if (el && document.activeElement !== el) {
el.focus();
}
}, []);
Vue 用户可用 onMounted + nextTick 确保 DOM 更新完成；Svelte 用 onMount 即可。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
textarea 加了 autofocus 还是没聚焦？检查这几点
即使不是 SPA，textarea 的 autofocus 也可能失败：
-
textarea被设为disabled或readonly→ 失去可聚焦能力 - 父容器有
display: none、visibility: hidden或hidden属性 → 浏览器跳过聚焦 - 页面存在多个
autofocus元素 → 只第一个解析到的生效，且顺序依赖 HTML 源码位置 - 使用了
contenteditable="true"的div替代textarea→autofocus对它完全无效
移动端聚焦 textarea 的隐藏风险
iOS Safari 几乎总是忽略 autofocus，Android Chrome 也越来越严格——不是“不支持”，而是主动限制：防止页面一开就弹软键盘遮挡内容。所以：
- 不要在首页或长列表页顶部放带
autofocus的textarea - 模态框（Modal）中若含
textarea，建议改用“点击按钮后聚焦”，而非加载即聚焦 - 如果真要强制聚焦，得配合
setTimeout延迟 100–300ms，且加if (document.hasFocus())保护
最易被忽略的点：软键盘弹出后，页面视口会滚动，可能把 textarea 顶出可视区，反而让用户看不见自己正在输入的内容。
